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="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
}
?>
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(); }
嗯,簡單的應用。沒有涉及的許可權、上傳的進度條等。
覺得文章有用?立即:和朋友一起共學習 共進步!
建議繼續學習:
- QQ上傳大檔案為什麼這麼快 (閱讀:11900)
- 10個強大的Ajax jQuery檔案上傳程式 (閱讀:7200)
- 解決securecrt rz 上傳rar,gif檔案不正確問題 (閱讀:6700)
- Codeigniter ACL library (閱讀:4940)
- PHP上傳進度條深度解析 (閱讀:4280)
- PHP上傳檔案型別徹底判斷方案及PHP+nginx上傳大小徹底控制方案 (閱讀:3220)
- PHP JAVA C上傳檔案如何準確判斷檔案型別-mime知識普及 (閱讀:3040)
- PHP檔案上傳原始碼分析(RFC1867) (閱讀:3000)
- 漸進增強的無重新整理多圖片上傳控制元件(iFrame+HTML5) (閱讀:2980)
- php_admin_value open_basedir 引起的上傳檔案失敗解決方法 (閱讀:2940)
QQ技術交流群:445447336,歡迎加入!
掃一掃訂閱我的微訊號:IT技術部落格大學習