首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

Codeigniter里的无刷新上传的实现代码

Posted in PHP onApril 14, 2019

好久没有更新了，写点吧算是翻译吧，纯原创没空啊XD

Codeigniter还是很好用的，淡水一直很推崇。说是codeigniter里的无刷新上传吧，fashion 一点的说法就是利用AJAX技术上传。其中用到了Jquery和 AjaxFileUpload 。

先建个表

CREATE TABLE `files` (
 `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
 `filename` VARCHAR(255) NOT NULL,
 `title` VARCHAR(100) NOT NULL
);

文件的目录结构如下：

public_html/
- application/
?- controllers/
?? upload.php
?- models/
?? files_model.php
?- views/
?? upload.php
?? files.php
- css/
?- style.css
- files/
- js/
?- AjaxFileUpload.js
?- site.js

第一步，建立表单

看上去就一个title文本字段，一个文件框，一个提交按钮，还有一个files的div。

控制器部分

首先，我们要建一个上传的表单和一个upload的Controller。在index方法里渲出upload的视图。如下：

class Upload extends CI_Controller
{
  public function __construct()
  {
   parent::__construct();
   $this->load->model('files_model');
   $this->load->database();
   $this->load->helper('url');
  }
 
  public function index()
  {
   $this->load->view('upload');
  }
}

我们已经在构造里加载了files_model，所以可以使用files_model里的方法。

建立表单视图

视图文件upload.php,包含了我们的上传表单。

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="<?php echo base_url()?>js/site.js"></script>
  <script src="<?php echo base_url()?>js/ajaxfileupload.js"></script>
  <link href="<?php echo base_url()?>css/style.css" rel="external nofollow" rel="stylesheet" />
</head>
<body>
  <h1>Upload File</h1>
  <form method="post" action="" id="upload_file">
   <label for="title">Title</label>
   <input type="text" name="title" id="title" value="" />
 
   <label for="userfile">File</label>
   <input type="file" name="userfile" id="userfile" size="20" />
 
   <input type="submit" name="submit" id="submit" />
  </form>
  <h2>Files</h2>
  <div id="files"></div>
</body>
</html>

我们在文件开始就加载了jquery，ajaxfileupload和我们自己的site.js文件。Id为files的div是我们显示上传文件列表用的。

一些简单的css

在css下建立style.css

h1, h2 { font-family: Arial, sans-serif; font-size: 25px; }
h2 { font-size: 20px; }
 
label { font-family: Verdana, sans-serif; font-size: 12px; display: block; }
input { padding: 3px 5px; width: 250px; margin: 0 0 10px; }
input[type="file"] { padding-left: 0; }
input[type="submit"] { width: auto; }
 
#files { font-family: Verdana, sans-serif; font-size: 11px; }
#files strong { font-size: 13px; }
#files a { float: right; margin: 0 0 5px 10px; }
#files ul { list-style: none; padding-left: 0; }
#files li { width: 280px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid #CCC; }

第二步，Javascript

在js下建立site.js

$(function() {
  $('#upload_file').submit(function(e) {
   e.preventDefault();
   $.ajaxFileUpload({
     url     :'./upload/upload_file/',
     secureuri   :false,
     fileElementId :'userfile',
     dataType  : 'json',
     data    : {
      'title'      : $('#title').val()
     },
     success : function (data, status)
     {
      if(data.status != 'error')
      {
        $('#files').html('<p>Reloading files...</p>');
        refresh_files();
        $('#title').val('');
      }
      alert(data.msg);
     }
   });
   return false;
  });
});

Javascript劫持了表单的提交，并由ajaxfileupload接管。其实是在后台创建了一个iframe并提交了数据。

我只是ajax提交了#title的值，可以通过参数提交更多的字段。

检查返回的json数据，如果没有错误，就刷新文件列表（下文有），清除title字段。不管怎样，都alert出返回的数据。

第三步，上传文件

控制器部分

现在开始上传文件了。我们的URL是这样的 /uplaod/upload_file/，所以，我们在uoload的控制器里建立upload_file方法。

public function upload_file()
{
  $status = "";
  $msg = "";
  $file_element_name = 'userfile';
 
  if (empty($_POST['title']))
  {
   $status = "error";
   $msg = "Please enter a title";
  }
 
  if ($status != "error")
  {
   $config['upload_path'] = './files/';
   $config['allowed_types'] = 'gif|jpg|png|doc|txt';
   $config['max_size'] = 1024 * 8;
   $config['encrypt_name'] = TRUE;
 
   $this->load->library('upload', $config);
 
   if (!$this->upload->do_upload($file_element_name))
   {
     $status = 'error';
     $msg = $this->upload->display_errors('', '');
   }
   else
   {
     $data = $this->upload->data();
     $file_id = $this->files_model->insert_file($data['file_name'], $_POST['title']);
     if($file_id)
     {
      $status = "success";
      $msg = "File successfully uploaded";
     }
     else
     {
      unlink($data['full_path']);
      $status = "error";
      $msg = "Something went wrong when saving the file, please try again.";
     }
   }
   @unlink($_FILES[$file_element_name]);
  }
  echo json_encode(array('status' => $status, 'msg' => $msg));
}

我们对title字段做了个简单的数据检查，看看他是否为空。不为空就加载codeigniter的upload库。这个类库为我们处理了很多的数据验证。

接着，我们上传文件了。如果成功我们保存title和file_name。然后我们删除了临时文件，最后，json方法返回了状态和信息，来告诉我们结果。

模型部分

按大多数人的MVC模式理念，我们应该在模型里处理数据库交换。

建立files_model.php

class Files_Model extends CI_Model {
 
  public function insert_file($filename, $title)
  {
   $data = array(
     'filename'   => $filename,
     'title'    => $title
   );
   $this->db->insert('files', $data);
   return $this->db->insert_id();
  }
 
}

保存上传文件的文件夹

不要忘记在根目录建立个files文件夹，并给他写入权限。

第四步，文件列表

成功上传后，我们需要更新文件列表，方便修改。

Javascript部分

打开site.js，在后面追加：

function refresh_files()
{
  $.get('./upload/files/')
  .success(function (data){
   $('#files').html(data);
  });
}

Jquery的简单应用。Ajax取得指定url的内容，填充到#files的div里。

控制器部分

不多说了。

public function files()
{
  $files = $this->files_model->get_files();
  $this->load->view('files', array('files' => $files));
}

调用模型的方法取得数据，再加载到files视图里显示。

模型部分

public function get_files()
{
  return $this->db->select()
     ->from('files')
     ->get()
     ->result();
}

视图部分

新建files.php视图

<?php
if (isset($files) && count($files))
{
  ?>
   

     <?php
     foreach ($files as $file)
     {
      ?>
      

        Delete
        <?php echo $file->title?>
        

        <?php echo $file->filename?>
      

      <?php
     }
     ?>
<?php
}
else
{
  ?>
  
No Files Uploaded


  <?php
}
?>

删除文件

Javascript部分

$('.delete_file_link').live('click', function(e) {
  e.preventDefault();
  if (confirm('Are you sure you want to delete this file?'))
  {
   var link = $(this);
   $.ajax({
     url     : './upload/delete_file/' + link.data('file_id'),
     dataType : 'json',
     success   : function (data)
     {
      files = $(#files);
      if (data.status === "success")
      {
        link.parents('li').fadeOut('fast', function() {
         $(this).remove();
         if (files.find('li').length == 0)
         {
           files.html('<p>No Files Uploaded</p>');
         }
        });
      }
      else
      {
        alert(data.msg);
      }
     }
   });
  }
});

控制器部分

public function delete_file($file_id)
{
  if ($this->files_model->delete_file($file_id))
  {
   $status = 'success';
   $msg = 'File successfully deleted';
  }
  else
  {
   $status = 'error';
   $msg = 'Something went wrong when deleteing the file, please try again';
  }
  echo json_encode(array('status' => $status, 'msg' => $msg));
}

模型部分

public function delete_file($file_id)
{
  $file = $this->get_file($file_id);
  if (!$this->db->where('id', $file_id)->delete('files'))
  {
   return FALSE;
  }
  unlink('./files/' . $file->filename);
  return TRUE;
}
 
public function get_file($file_id)
{
  return $this->db->select()
     ->from('files')
     ->where('id', $file_id)
     ->get()
     ->row();
}

嗯，简单的应用。没有涉及的权限、上传的进度条等。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Codeigniter里的无刷新上传的实现代码

- Author -

IT技术博客大学习

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
一周学会PHP（视频）Http下载
Dec 12 PHP
php intval的测试代码发现问题
Jul 27 PHP
php switch语句多个值匹配同一代码块的实现
Mar 03 PHP
php环境无法上传文件的解决方法
Apr 30 PHP
php 购物车完整实现代码
Jun 05 PHP
ThinkPHP模板引擎之导入资源文件方法详解
Jun 18 PHP
php中将一个对象保存到Session中的方法
Mar 13 PHP
PHP设计模式之迭代器模式
Jun 17 PHP
php实时倒计时功能实现方法详解
Feb 27 PHP
php利用fsockopen GET/POST提交表单及上传文件
May 22 PHP
php实现的二分查找算法示例
Jun 20 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
Sep 16 PHP
PHP7中I/O模型内核剖析详解
Apr 14 #PHP
浅析PHP7的多进程及实例源码
Apr 14 #PHP
什么是PHP7中的孤儿进程与僵尸进程
Apr 14 #PHP
php intval函数用法总结
Apr 14 #PHP
PHP中上传文件打印错误错误类型分析
Apr 14 #PHP
PHP扩展Swoole实现实时异步任务队列示例
Apr 13 #PHP
php+ajax实现商品对比功能示例
Apr 13 #PHP
iOS16(1) 模糊匹配(1) 模型保存加载(1) compose(3) Pyecharts(7) iOS(1) Athens(1) opencv(7) moviepy(1) FuzzyWuzzy(1)
You might like
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
看了就知道什么是JSON
2007/12/09 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
python自动化报告的输出用例详解
2018/05/30 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
python调用摄像头拍摄数据集
2019/06/01 Python
Python中@property的理解和使用示例
2019/06/11 Python
上海微创软件面试题
2012/06/14 面试题
入党思想汇报怎么写
2014/04/03 职场文书
法人委托书范本格式
2014/09/15 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
2016年元旦主持词
2015/07/06 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python