您的位置:首页 > 编程学习 > > 正文

真实的codeigniter错误(Codeigniter里的无刷新上传的实现代码)

更多 时间:2022-03-28 01:12:20 类别:编程学习 浏览量:1640

真实的codeigniter错误

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

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

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

先建个表

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • CREATE TABLE `files` (
  •  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
  •  `filename` VARCHAR(255) NOT NULL,
  •  `title` VARCHAR(100) NOT NULL
  • );
  • 文件的目录结构如下:

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 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的li。

    控制器部分

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

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 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,包含了我们的上传表单。

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • <!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>
  •   <li id="files"></li>
  • </body>
  • </html>
  • 我们在文件开始就加载了jquery,ajaxfileupload和我们自己的site.js文件。Id为files的li是我们显示上传文件列表用的。

    一些简单的css

    在css下建立style.css

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 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

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • $(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方法。

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 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

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 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,在后面追加:

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • function refresh_files()
  • {
  •   $.get('./upload/files/')
  •   .success(function (data){
  •    $('#files').html(data);
  •   });
  • }
  • Jquery的简单应用。Ajax取得指定url的内容,填充到#files的li里。

    控制器部分

    不多说了。

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • public function files()
  • {
  •   $files = $this->files_model->get_files();
  •   $this->load->view('files', array('files' => $files));
  • }
  • 调用模型的方法取得数据,再加载到files视图里显示。

    模型部分

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • public function get_files()
  • {
  •   return $this->db->select()
  •      ->from('files')
  •      ->get()
  •      ->result();
  • }
  • 视图部分

    新建files.php视图

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • <?php
  • if (isset($files) && count($files))
  • {
  •   ?>
  •    
  •  
  •      <?php
  •      foreach ($files as $file)
  •      {
  •       ?>
  •       
  •  
  •         Delete
  •         <?php echo $file->title?>
  •         
  •  
  •         <?php echo $file->filename?>
  •       
  •  
  •       <?php
  •      }
  •      ?>
  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • <?php
  • }
  • else
  • {
  •   ?>
  •   
  • No Files Uploaded
  •  
  •  
  •   <?php
  • }
  • ?>
  • 删除文件

    Javascript部分

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • $('.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);
  •       }
  •      }
  •    });
  •   }
  • });
  • 控制器部分

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 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));
  • }
  • 模型部分

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 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();
  • }
  • 嗯,简单的应用。没有涉及的权限、上传的进度条等。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    原文链接:https://blogread.cn/it/article/4334