首页
所有分类
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 相关文章推荐
关于页面优化和伪静态
Oct 11 PHP
windows下开发并编译PHP扩展的方法
Mar 18 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
Jun 06 PHP
QQ登录 PHP OAuth示例代码
Jul 20 PHP
探讨:parse url解析URL,返回其组成部分
Jun 14 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
Oct 20 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
Apr 03 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
Mar 23 PHP
PHP上传图片类显示缩略图功能
Jun 30 PHP
php登录超时检测功能实例详解
Mar 21 PHP
php批量转换文件夹下所有文件编码的函数类
Aug 06 PHP
docker-compose部署php项目实例详解
Jul 30 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
GZIP(2) DNS服务器(2) FTP服务器(1) IIS7(1) DBLink(1) 界面设计(1) 粒子对撞机(1) 磁盘分区(1) 对撞机(1) .NET Framework(2)
You might like
PHP实时统计中文字数和区别
2019/02/28 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python批量发送post请求的实现代码
2018/05/05 Python
django如何通过类视图使用装饰器
2019/07/24 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
跑鞋、网球鞋、网球拍、服装及装备：Holabird Sports
2016/09/19 全球购物
街头时尚在线：JESSICABUURMAN
2019/06/16 全球购物
一道SQL面试题
2012/12/31 面试题
C#面试常见问题
2013/02/25 面试题
公司股权转让协议书
2014/04/12 职场文书
119消防日活动总结
2014/08/29 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
宣传稿格式范文
2015/07/23 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS
Python os和os.path模块详情
2022/04/02 Python