好久没有更新了，写点吧算是翻译吧，纯原创没空啊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->databa(); $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 ba_url()?>js/site.js"></script> <script src="<?php echo ba_url()?>js/ajaxfileupload.js"></script> <link href="<?php echo ba_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="urfile">file</label> 文学类<input type="file" name="urfile" id="urfile" 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-rif; font-size: 25px; }h2 { font-size: 20px; } label { font-family: verdana, sans-rif; 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-rif; 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/', cureuri :fal, fileelementid :'urfile', 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全部的英语单词 fal; });});javascript劫持了表单的提交，并由ajaxfileupload接管。其实是在后台创建了一个iframe并提交了数据。
我只是ajax提交了#title的值，可以通过参数提交更多的字段。
检查返回的json数据，如果没有错误，就刷新文件列表（下文有），清除title字段。不管怎样，都alert出返回的数据。
第三步，上传文件
控制器部分
现在开始上传文件了。我们的url是这样的 /uplaod/upload_file/，所以，我们在uoload的控制器里建立upload_file方法。
public function upload_file(){ $status = ""; $msg = ""; $file_element_name = 'urfile'; if (empty($_post['title'])) { $status = "error"; $msg = "plea 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('', ''); } el { $data = $this->upload->data(); $file_id = $this->files_model->inrt_file($data['file_name'], $_post['title']); if($file_id) { $status = "success"; $msg = "file successfully uploaded"; } el { unlink($data['full_path']); $status = "error"; $msg = "something went wrong when saving the file, plea try again."; } } @unlink($_files[$file_element_name]); } echo json_encode(array('st英语六级是什么水平atus' => $status, 'msg' => $msg));}我们对title字段做了个简单的数据检查，看看他是否为空。不为空就加载codeigniter的upload库。这个类库为我们处理了很多的数据验证。
接着，我们上传文件了。如果成功我们保存title和file_name。然后我们删除了临时文件，最后，json方法返回了状态和信息，来告诉我们结果。
模型部分
按大多数人的mvc模式理念，我们应该在模型里处理数据库交换。
建立files_model.php
class files_model extends ci_model { public function inrt_file($filename, $title) { $data = array( 'filename' => $filename, 'title' => $title ); $this->db->inrt('files', $data); return $this->db->inrt_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->lect() ->from('files') ->get() ->result();}视图部分
新建files.php视图
<?phpif (ist($files) && count($files)){ ?> <?php foreach ($files as $file) { ?> delete <?php echo $file->title?> <?php echo $file->filename?> <?php } ?><?php}el{ ?> 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', fun成本会计实习报告ction() { $(this).remove(); if (files.find('li').length == 0) { files.html('<p>no files uploaded</p>'); } }); } el { alert(data.msg); } } }); }});控制器部分
public function delete_file($file_id){ if ($this->files_model->delete_file($file_id)) { $status = 'success'; $msg = 'file successfully deleted'; } el { $status = 'error'; $msg = 'something went wrong when deleteing the file, plea 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 fal; } unlink('./files/' . $file->filename); return true;} public function get_file($file_id){ return $this->db->lect() ->from('files') ->where('id', $file_id) ->get() ->row();}嗯，简单的应用。没有涉及的权限、上传的进度条等。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-07 10:40:31，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/40c87100ccfecdd512bbd1b9e5fe4fe5.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：Codeigniter里的无刷新上传的实现代码.doc
本文 PDF 下载地址：Codeigniter里的无刷新上传的实现代码.pdf
| 留言与评论（共有 0 条评论） |
