文件上传插件jQuery-File-Upload结合CI框架的案例

文件上传插件jQuery-File-Upload结合CI框架的案例2014-11-06简单介绍一下这个插件的使用小案例，首先先看一下CI框架中的目录结构
这是我们一般使用CI框架时候的目录结构，其中assets是jQuery-File-Upload带的要用到的静态文件，比方说CSS,JS,Image图片等，可以大体看一下
目录放对了之后，我们就可以写我们想要的MVC结构里面的内容了，首先我们看一下View里面的内容
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>首页</title><link href="/css/bootstrap.min.css" rel="stylesheet" media="screen" /><script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script><link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /><！--[if IE 7]><link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css"><！[endif]--><script type="text/javascript" src="/js/common.js"></script><！-- Force latest IE rendering engine or ChromeFrame if installed --><！--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><！[endif]--><！-- Bootstrap styles --><！--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>--><！-- Generic page styles --><link rel="stylesheet" href="/assets/css/style.css" /><！-- blueimp Gallery styles --><！--<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css"/>--><！-- CSS to style the file input field as button and adjust the Bootstrap progress bars --><link rel="stylesheet" href="/assets/css/jquery.fileupload-ui.css" /></head><body><！--mainbody--><div class="mainWrap"><div class="row-fluid"><div class="main"><div class="span9"><div class="rightBar"><div class="content"><form class="form-horizontal" id="fileupload" action="/profile/pubRaider" method="post"enctype="multipart/form-data"><fieldset><legend>图片上传</legend><！-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --><div class="fileupload-buttonbar"><div class="span12"><！-- The fileinput-button span is used to style the file input field as button --><span class="btn btn-success fileinput-button"><i class="icon-plus"></i><span>添加文件</span><input type="file" name="files[]" multiple /><input type="hidden" id="dir_token" value="<？php echo $dir_token？>"/><input type="hidden" id="action" value="<？php echo $action？>"/></span><button type="button" class="btn btn-danger delete"><i class="icon-trash"></i><span>删除文件</span></button><input type="checkbox" class="toggle" /><span>选中所有文件</span><！-- The loading indicator is shown during file processing --><span class="fileupload-loading"></span></div></div><！-- The table listing the files available for upload/download --><table role="presentation" class="table table-striped"><tbody class="files"></tbody></table></fieldset></form></div></div></div></div></div></div><script type="text/javascript" src="/js/bootstrap.min.js"></script><script type="text/javascript" src="/js/bootstrap-datetimepicker.js" charset="UTF-8"></script><script type="text/javascript" src="/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script><script id="template-upload" type="text/x-tmpl">{% for （var i=0, file; file=o.files[i]; i++） { %}<tr class="template-upload fade"><td><span class="preview"></span></td><td><p class="name">{%=file.name%}</p>{% if （file.error） { %}<div><span class="label label-danger">Error</span> {%=file.error%}</div>{% } %}</td><td><p class="size">{%=o.formatFileSize（file.size）%}</p>{% if （！o.files.error） { %}<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>{% } %}</td><td>{% if （！o.files.error && ！i && ！o.options.autoUpload） { %}<button class="btn btn-primary start"><i class="icon-upload"></i><span>开始</span></button>{% } %}{% if （！i） { %}<button class="btn btn-warning cancel"><i class="icon-ban-circle"></i><span>取消</span></button>{% } %}</td></tr>{% } %}</script><！-- The template to display files available for download --><script id="template-download" type="text/x-tmpl">{% for （var i=0, file; file=o.files[i]; i++） { %}<tr class="template-download fade"><td><span class="preview">{% if （file.thumbnailUrl） { %}<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>{% } %}</span></td><td><p class="name">{% if （file.url） { %}<a name="upload_pic" href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl？"data-gallery":""%}>{%=file.name%}</a>{% } else { %}<span>{%=file.name%}</span>{% } %}</p>{% if （file.error） { %}<div><span class="label label-danger">错误</span> {%=file.error%}</div>{% } %}</td><td><span class="size">{%=o.formatFileSize（file.size）%}</span></td><td>{% if （file.deleteUrl） { %}<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if （file.deleteWithCredentials） { %} data-xhr-fields="{"withCredentials":true}"{% } %}><i class="icon-trash"></i><span>删除</span></button><input type="checkbox" name="delete" value="1" class="toggle">{% } else { %}<button class="btn btn-warning cancel"><i class="icon-ban-circle"></i><span>取消</span></button>{% } %}</td></tr>{% } %}</script><！--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>--><！-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --><script src="/assets/js/vendor/jquery.ui.widget.js"></script><！-- The Templates plugin is included to render the upload/download listings --><script src="/assets/js/tmpl.js"></script><！-- The Load Image plugin is included for the preview images and image resizing functionality --><script src="/assets/js/load-image.min.js"></script><！-- The Canvas to Blob plugin is included for image resizing functionality --><script src="/assets/js/canvas-to-blob.js"></script><！-- Bootstrap JS is not required, but included for the responsive demo navigation --><！--<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>--><！-- blueimp Gallery script --><script src="/assets/js/jquery.blueimp-gallery.min.js"></script><！-- The Iframe Transport is required for browsers without support for XHR file uploads --><script src="/assets/js/jquery.iframe-transport.js"></script><！-- The basic File Upload plugin --><script src="/assets/js/jquery.fileupload.js"></script><！-- The File Upload processing plugin --><script src="/assets/js/jquery.fileupload-process.js"></script><！-- The File Upload image preview & resize plugin --><script src="/assets/js/jquery.fileupload-image.js"></script><！-- The File Upload audio preview plugin --><！--<script src="/assets/js/jquery.fileupload-audio.js"></script>--><！-- The File Upload video preview plugin --><！--<script src="/assets/js/jquery.fileupload-video.js"></script>--><！-- The File Upload validation plugin --><script src="/assets/js/jquery.fileupload-validate.js"></script><！-- The File Upload user interface plugin --><script src="/assets/js/jquery.fileupload-ui.js"></script><！-- The main application script --><script src="/assets/js/main.js"></script><！-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 --><！--[if （gte IE 8）&（lt IE 10）]><script src="/assets/js/cors/jquery.xdr-transport.js"></script><！[endif]--><！--底部--></body></html>