好久沒有更新了，寫點(diǎn)吧算是翻譯吧，純原創(chuàng)沒空啊XD
Codeigniter還是很好用的，淡水一直很推崇。說是codeigniter里的無刷新上傳吧，fashion 一點(diǎn)的說法就是利用AJAX技術(shù)上傳。其中用到了Jquery和 AjaxFileUpload 。
先建個(gè)表
|
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); |
文件的目錄結(jié)構(gòu)如下：
|
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 |
第一步，建立表單
看上去就一個(gè)title文本字段，一個(gè)文件框，一個(gè)提交按鈕，還有一個(gè)files的div。
控制器部分
首先，我們要建一個(gè)上傳的表單和一個(gè)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'); }} |
我們已經(jīng)在構(gòu)造里加載了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> <div id="files"></div></body></html> |
我們在文件開始就加載了jquery，ajaxfileupload和我們自己的site.js文件。Id為files的div是我們顯示上傳文件列表用的。
一些簡單的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接管。其實(shí)是在后臺創(chuàng)建了一個(gè)iframe并提交了數(shù)據(jù)。
我只是ajax提交了#title的值，可以通過參數(shù)提交更多的字段。
檢查返回的json數(shù)據(jù)，如果沒有錯(cuò)誤，就刷新文件列表（下文有），清除title字段。不管怎樣，都alert出返回的數(shù)據(jù)。
第三步，上傳文件
控制器部分
現(xiàn)在開始上傳文件了。我們的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字段做了個(gè)簡單的數(shù)據(jù)檢查，看看他是否為空。不為空就加載codeigniter的upload庫。這個(gè)類庫為我們處理了很多的數(shù)據(jù)驗(yàn)證。
接著，我們上傳文件了。如果成功我們保存title和file_name。然后我們刪除了臨時(shí)文件，最后，json方法返回了狀態(tài)和信息，來告訴我們結(jié)果。
模型部分
按大多數(shù)人的MVC模式理念，我們應(yīng)該在模型里處理數(shù)據(jù)庫交換。
建立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(); } } |
保存上傳文件的文件夾
不要忘記在根目錄建立個(gè)files文件夾，并給他寫入權(quán)限。
第四步，文件列表
成功上傳后，我們需要更新文件列表，方便修改。
Javascript部分
打開site.js，在后面追加：
|
1
2
3
4
5
6
7
|
function refresh_files(){ $.get('./upload/files/') .success(function (data){ $('#files').html(data); });} |
Jquery的簡單應(yīng)用。Ajax取得指定url的內(nèi)容，填充到#files的div里。
控制器部分
不多說了。
|
1
2
3
4
5
|
public function files(){ $files = $this->files_model->get_files(); $this->load->view('files', array('files' => $files));} |
調(diào)用模型的方法取得數(shù)據(jù)，再加載到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
|
<?phpif (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();} |
嗯，簡單的應(yīng)用。沒有涉及的權(quán)限、上傳的進(jìn)度條等。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blogread.cn/it/article/4334
