Codeigniter里的无刷新上传

栏目: jQuery · 发布时间: 5年前

内容简介:好久没有更新了,写点吧算是翻译吧,纯原创没空啊XDCodeigniter还是很好用的,淡水一直很推崇。说是codeigniter里的无刷新上传吧,fashion 一点的说法就是利用AJAX技术上传。其中用到了Jquery和 AjaxFileUpload 。先建个表

好久没有更新了,写点吧算是翻译吧,纯原创没空啊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="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();
}

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

觉得文章有用?立即:和朋友一起 共学习 共进步!

建议继续学习:

  1. QQ上传大文件为什么这么快    (阅读:11900)
  2. 10个强大的Ajax jQuery文件上传程序    (阅读:7200)
  3. 解决securecrt rz 上传rar,gif文件不正确问题    (阅读:6700)
  4. Codeigniter ACL library    (阅读:4940)
  5. PHP上传进度条深度解析    (阅读:4280)
  6. PHP上传文件类型彻底判断方案及PHP+nginx上传大小彻底控制方案    (阅读:3220)
  7. PHP JAVA C上传文件如何准确判断文件类型-mime知识普及    (阅读:3040)
  8. PHP文件上传源码分析(RFC1867)    (阅读:3000)
  9. 渐进增强的无刷新多图片上传控件(iFrame+HTML5)    (阅读:2980)
  10. php_admin_value open_basedir 引起的上传文件失败解决方法    (阅读:2940)

QQ技术交流群:445447336,欢迎加入!

扫一扫订阅我的微信号:IT技术博客大学习


以上所述就是小编给大家介绍的《Codeigniter里的无刷新上传》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

复制互联网之2

复制互联网之2

文飞翔//刘伟 / 清华大学出版社 / 2011-6 / 45.00元

《复制互联网之2:2011年全球最值得模仿的100个网站》从行业的整体发展趋势中,收录了国内外最值得关注的互联网商业模式,为初创网站设计者提供了诸多可供借鉴的最具有启发价值的商业案例。此外,《复制互联网之2:2011年全球最值得模仿的100个网站》对前沿互联网产品的介绍和思考,也值得网站开发人员、产品设计人员及公司管理人员在产品和运营的创新上借鉴与参考。 作者是网易科技频道的编辑,长期致力于......一起来看看 《复制互联网之2》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具