溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了利用Codeigniter怎么實現一個無刷新上傳功能，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
先建個表
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> <h2>Upload File</h2> <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> <h3>Files</h3> <div id="files"></div> </body> </html>
我們在文件開始就加載了jquery，ajaxfileupload和我們自己的site.js文件。Id為files的div是我們顯示上傳文件列表用的。
一些簡單的css
在css下建立style.css
h2, h3 { font-family: Arial, sans-serif; font-size: 25px; }
h3 { 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();
}上述內容就是利用Codeigniter怎么實現一個無刷新上傳功能，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
