首页
所有分类
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静态类
Nov 25 PHP
使用PHP获取网络文件的实现代码
Jan 01 PHP
php模拟js函数unescape的函数代码
Oct 20 PHP
php页面跳转代码 输入网址跳转到你定义的页面
Mar 28 PHP
PHP连接Access数据库的方法小结
Jun 20 PHP
简单实用的.net DataTable导出Execl
Oct 28 PHP
php对二维数组进行排序的简单实例
Dec 19 PHP
PHP实现对站点内容外部链接的过滤方法
Sep 10 PHP
PHP实现文件下载【实例分享】
Apr 28 PHP
Yii2语言国际化自动配置详解
Aug 22 PHP
php 中phar包的使用教程详解
Oct 26 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
Apr 05 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
nacos(1) 模板引擎(1) seata(1) 三角函数(1) 动态代理(1) Dijkstra(1) 优先队列(1) Carbon(1) pongo2(1) 迪杰斯特拉(1)
You might like
phpmailer发送邮件之后，返回收件人是否阅读了邮件的方法
2014/07/19 PHP
jquery.validate使用攻略 第三部
2010/07/01 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python中int与str互转方法
2018/07/02 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
Python可以用来做什么
2020/11/23 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
Guess美国官网：美国知名服装品牌
2019/04/08 全球购物
Python的两道面试题
2013/06/29 面试题
对公司合理化的建议书
2014/03/12 职场文书
鉴定评语大全
2014/05/05 职场文书
市场策划求职信
2014/08/07 职场文书
英文版辞职信
2015/02/28 职场文书
水浒传读书笔记
2015/06/25 职场文书
500字作文之周记
2019/12/13 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python