Reloading files...
'); 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视图 Delete title?> filename?> No Files Uploaded 删除文件 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('No Files Uploaded
'); } }); } 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(); } 嗯，简单的应用。没有涉及的权限、上传的进度条等。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。