欧美视频亚洲视频日韩动漫,欧美高清一区二区三,日韩欧美在线精品

主頁 > 知識庫 > Codeigniter里的無刷新上傳的實現代碼

Codeigniter里的無刷新上傳的實現代碼

好久沒有更新了，寫點吧算是翻譯吧，純原創沒空啊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();
}

嗯，簡單的應用。沒有涉及的權限、上傳的進度條等。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: