jQuery-File-Upload 插件使用
我的图书馆
jQuery-File-Upload 插件使用
JSP:&%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&&%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %&&%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %&&%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %&&%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/vendor/jquery.ui.widget.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/jquery.iframe-transport.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/jquery.fileupload.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/cors/jquery.xdr-transport.js"&&/script&以下可选：&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/jquery.fileupload-audio.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/jquery.fileupload-image.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/jquery.fileupload-jquery-ui.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/jquery.fileupload-process.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/jquery.fileupload-ui.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/jquery.fileupload-validate.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/jquery.fileupload-video.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/jquery.fileupload-angular.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/ors/jquery.postmessage-transport.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/cors/jquery.xdr-transport.js"&&/script&&script type="text/javascript" src="&%=basePath%&js/jquery.fileupload/app.js"&&/script&JS:&dl&&&& &&& &&& &&& &dt&上传文件：&/dt&&&& &&& &&& &&& &dd&&&& &&& &&& &&& &&& &input id="datafile_input" type="file" name="dataFile" data-url="uploadData.html" multiple &&& &&& &&& &&& &&& &&& onclick="JavaScript:document.getElementById('upload_info').innerHTML&&& ='选择文件上传.';"&&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &&input type="hidden" name="datafilename" id="datafilename" value=""&&&& &&& &&& &&& &&& &&input type="hidden" name="docstorelocation" value="" id="docstorelocation"&&&& &&& &&& &&& &&& &%--class="required" &input type="button" id="uploadButton" value="上传图片" /&--%&&&& &&& &&& &&& &&& &span class="info" style="font-weight:" id="upload_info"&选择文件上传.&/span&&&& &&& &&& &&& &&& &div id="imgEle" /&&&& &&& &&& &&& &/dd&&&& &&& &&& &&& &&& &&& &&& &/dl&&&& &&& &&& &div class="divider"&&/div&&&& &&& &&& &&& &&& &&& &dl&&&& &&& &&& &&& &dt&文件内容：&/dt&&&& &&& &&& &&& &dd&&&& &&& &&& &&& &&& &textarea rows="10" cols="135" name="dataContent"& id="dataContent" &${dataContent}&/textarea&&&& &&& &&& &&& &&& &span class="info"&解析后的文件内容&/span&&&& &&& &&& &&& &/dd&&&& &&& &&& &/dl&&&& &&& &&& &div class="divider"&&/div&最终使用的JS:&script type="text/javascript"&$('#datafile_input').fileupload({& &&& done: function (e, data) {&&& &&& //alert(data.result+"---" + data)&&& &&& $('#dataContent').text(data.result['dataContent']);&&& &&& //&font style='color:'&&/font&&&& &&& $('#upload_info').text("" + data.result['fileName']& + " " + data.result['info']);&&& &&& //$('#fileName').text(data.result['fileName'] + " ");&&& &&& $("#docstorelocation").val(data.result['relativePath']);&&& &&& $("#datafilename").val(data.result['newfileName']);&&& &&& &&& &&& var img = $("&img height='120' width='150' alt='"+data.result['fileName']+"' src='"+data.result['relativePath']+"'&");&&& &&& $("#imgEle").empty();&&& &&& $("#imgEle").append(img);&&& } });&/script&其他JS：$(function(){&&&& //上传图片&&&& $("#btnUpload2").click(function() {&&& &&& &$.ajax({&&& &&&&&&&&&&& //提交数据的类型 POST GET&&& &&&&&&&&&&& type:"POST",&&& &&&&&&&&&&& //提交的网址&&& &&&&&&&&&&& url:"uploadData.html",&&& &&&&&&&&&&& //提交的数据&&& &&&&&&&&&&& data:{Name:"sanmao",Password:"sanmaoword"},&&& &&&&&&&&&&& //返回数据的格式&&& &&&&&&&&&&& datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".&&& &&&&&&&&&&& //在请求之前调用的函数&&& &&&&&&&&&&& beforeSend:function(){$("#msg").html("logining");},&&& &&&&&&&&&&& //成功返回之后调用的函数&&&&&&&&&&& &&& &&&&&&&&&&& success:function(data){&&& &&& &&&&&&&&&& $("#msg").html(decodeURI(data));&&&&&&&&&& &&& &&& &&&&&&&&&&& },&&& &&&&&&&&&&& //调用执行后调用的函数&&& &&&&&&&&&&& complete: function(XMLHttpRequest, textStatus){&&& &&&&&&&&&&&&&& alert(XMLHttpRequest.responseText);&&& &&&&&&&&&&&&&& alert(textStatus);&&& &&&&&&&&&&&&&&& //HideLoading();&&& &&&&&&&&&&& },&&& &&&&&&&&&&& //调用出错执行的函数&&& &&&&&&&&&&& error: function(){&&& &&&&&&&&&&&&&&& //请求出错处理&&& &&&&&&&&&&& }&&&&&&& &&& &&&&&&&& });&&&& });& });&&function test(){&&& && $.ajax({&&& &&&&&&&&&&& //提交数据的类型 POST GET&&& &&&&&&&&&&& type:"POST",&&& &&&&&&&&&&& //提交的网址&&& &&&&&&&&&&& url:"uploadData.html",&&& &&&&&&&&&&& //提交的数据&&& &&&&&&&&&&& data:{Name:"sanmao",Password:"sanmaoword"},&&& &&&&&&&&&&& //返回数据的格式&&& &&&&&&&&&&& datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".&&& &&&&&&&&&&& //在请求之前调用的函数&&& &&&&&&&&&&& beforeSend:function(){$("#msg").html("logining");},&&& &&&&&&&&&&& //成功返回之后调用的函数&&&&&&&&&&& &&& &&&&&&&&&&& success:function(data){&&& &&& &&&&&&&&&& $("#msg").html(decodeURI(data));&&&&&&&&&& &&& &&& &&&&&&&&&&& },&&& &&&&&&&&&&& //调用执行后调用的函数&&& &&&&&&&&&&& complete: function(XMLHttpRequest, textStatus){&&& &&&&&&&&&&&&&& alert(XMLHttpRequest.responseText);&&& &&&&&&&&&&&&&& alert(textStatus);&&& &&&&&&&&&&&&&&& //HideLoading();&&& &&&&&&&&&&& },&&& &&&&&&&&&&& //调用出错执行的函数&&& &&&&&&&&&&& error: function(){&&& &&&&&&&&&&&&&&& //请求出错处理&&& &&&&&&&&&&& }&&&&&&& &&& &&&&&&&& });&&& & }&&&& $(function(){&&&&&& //上传图片&&&&&& $("#btnUpload").click(function() {&&&&&&&&&&&&&& //alert(uploadFile());&&&&&&&&&&&&& $.ajaxFileUpload({& &&&&&&&&&&&&&&&&&& url:"uploadData.html",&&&&&&&&&&& //需要链接到服务器地址& &&&&&&&&&&&&&&&&&& secureuri:true,& &&&&&&&&&&&&&&&&&& fileElementId:'file',&&&&&&&&&&&&&&&&&&&&&&& //文件选择框的id属性& &&&&&&&&&&&&&&&&&& success: function(data, status){& &&&&&&&&&&&&&&&&& &&& &&& alert("");&& &&&&&&&&&&&&&&&&&&&&&& var results = $(data).find('body').html();& &&&&&&&&&&&&&&&&&&&&&& var obj = eval("("+results+")");& &&&&&&&&&&&&&&&&&&&&&& $("#fileSize").val(obj.fileSize);& &&&&&&&&&&&&&&&&&&&&&& $("#fileUrl").val(obj.fileUrl);& &&&&&&&&&&&&&&&&&&&&&& $('#fileCatalogForm').submit();& &&&&&&&&&&&&&&&&&& },error: function (data, status, e){& &&&&&&&&&&&&&&&&&&&&&&&&&& showDialogWithMsg('ideaMsg','提示','文件错误！');& &&&&&&&&&&&&&&&&&& }& &&&&&&&&&&&&&& });& &&&&&& });&&& });&&& function uploadFile(){& &&&&&&& $.ajaxFileUpload({& &&&&&&&&&&&&&&& url:"uploadData.html",&&&&&&&&&&& //需要链接到服务器地址& &&&&&&&&&&&&&&& secureuri:true,& &&&&&&&&&&&&&&& fileElementId:'file',&&&&&&&&&&&&&&&&&&&&&&& //文件选择框的id属性& &&&&&&&&&&&&&&& success: function(data, status){&&&& &&&&&&&&&&&&&&&&&&& var results = $(data).find('body').html();& &&&&&&&&&&&&&&&&&&& var obj = eval("("+results+")");& &&&&&&&&&&&&&&&&&&& $("#fileSize").val(obj.fileSize);& &&&&&&&&&&&&&&&&&&& $("#fileUrl").val(obj.fileUrl);& &&&&&&&&&&&&&&&&&&& $('#fileCatalogForm').submit();& &&&&&&&&&&&&&&& },error: function (data, status, e){& &&&&&&&&&&&&&&&&&&&&&&& showDialogWithMsg('ideaMsg','提示','文件错误！');& &&&&&&&&&&&&&&& }& &&&&&&&&&&& });& &&& }& &&& controller(SpringMVC):&&& @RequestMapping("uploadData.html")&&& @ResponseBody&&& public ModelMap uploadData(ModelMap modelMap, HttpServletRequest request, //&&& &&& &&& @RequestParam(value = "dataFile", required = false) MultipartFile dataFile) {&&& &&& String dataContent = DateUtil.getLocalDate() + "&&& 美国出动直升机搜索越狱嫌犯。34岁的戴维·斯韦阿特和48岁的理查德·马特从纽约州安保措施最为严密的克林顿监狱钻墙越狱。";&&& &&& int flag = 1;&&& &&& String info = "上传并解析完成！";&&& &&& String relativePath = "";&&& &&& String newfileName = "";// 新文件名称&&& &&& String fileName = "";// 原文件名称&&& &&& try {&&& &&& &&& String uploadDir = InitializeListener.ROOT_PATH + InitializeListener.DATA_IMG_PATH;&&& &&& &&& File dirPath = new File(uploadDir);&&& &&& &&& if (!dirPath.exists()) {&&& &&& &&& &&& dirPath.mkdirs();&&& &&& &&& }&&& &&& &&& fileName = dataFile.getOriginalFilename();&&& &&& &&& String fileType = fileName.substring(fileName.lastIndexOf("."), fileName.length());&&& &&& &&& newfileName = System.currentTimeMillis() + fileT&&& &&& &&& File uploadedFile = new File(uploadDir + File.separator + newfileName);&&& &&& &&& relativePath = InitializeListener.DATA_IMG_PATH + "/" + newfileN&&& &&& &&& System.out.println("file absolute path:" + uploadedFile.getAbsolutePath());&&& &&& &&& System.out.println("file relative path:" + relativePath);&&& &&& &&& FileCopyUtils.copy(dataFile.getBytes(), uploadedFile); // 复制图片&&& &&& &&& /*&&& &&& &&& &* 此处解析图片获取内容&&& &&& &&& &*/&&& &&& &&& //dataContent = xxx(uploadedFile.getAbsolutePath());&&& &&& &&& modelMap.put("absolutePath", uploadedFile.getAbsolutePath());&&& &&& &&& modelMap.put("fileName", fileName);&&& &&& &&& modelMap.put("newfileName", newfileName);&&& &&& &&& modelMap.put("info", info);&&& &&& &&& modelMap.put("upload", flag);&&& &&& &&& modelMap.put("relativePath", relativePath);&&& &&& &&& modelMap.put("dataContent", dataContent);&&& &&& } catch (Exception e) {&&& &&& &&& e.printStackTrace();&&& &&& &&& info = "上传或解析失败！";&&& &&& &&& flag = 0;&&& &&& }&&& &&& return modelM&&& }jQuery File Upload的最简模型http://blog.csdn.net/violet_day/article/details/jQuery File Upload的最简模型
jQuery File Upload包含了一堆文件，首先需要弄清楚的是最核心的部分是哪些，根据可以知道，一个最简单的jQuery File Upload上传组件，必须包括以下文件：
jQuery核心库，建议使用jQuery 1.8以上版本js/vendor/jquery.ui.widget.js ：
js/jquery.iframe-transport.js ： 扩展iframe数据传输js/jquery.fileupload.js ： jQuery File Upload核心类js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题
此时只需要加载一个上传按钮
[html] &id="fileupload"&type="file"&name="files[]"&data-url="server/php/"&multiple&&
以及一行代码
[html] $('#fileupload').fileupload();&&
就完成了一个最基本的上传组件。这个最简单的上传组件可以将选中的文件以表单形式提交到data-url约定的URL，同时提供了足够多的可供扩展。
jQuery File Upload的简单扩展
对于最简模型，稍加扩展就可以实现一些比较常用的功能，比如可以在上传完毕后可以显示一个简单的结果：
[javascript] $('#fileupload').fileupload({&&&&&&done:&function&(e,&data)&{&&&&&&&&&&$.each(data.result,&function&(index,&file)&{&&&&&&&&&&&&&&$('&p/&').text(file.name&+&'&uploaded').appendTo($("body"));&&&&&&&&&&});&&&&&&}&&});&&
或者显示上传进度，配合一些进度条组件就可以构成一个上传进度条
[javascript] $('#fileupload').fileupload('option',&{&&&&&&progressall:&function&(e,&data)&{&&&&&&&&&&var&progress&=&parseInt(data.loaded&/&data.total&*&100,&10);&&&&&&&&&&console.log(progress&+&'%');&&&&&&}&&});&&
等等。只要多阅读就可以配合项目做更具体的扩展开发。
XHR响应为Json时IE的下载BUG
这里需要特别注意的是，由于jQuery File Upload都是采用XHR在传递数据，服务器端返回的通常是JSON格式的响应，但是IE会将这些JSON响应误认为是文件传输，然后直接弹出下载框询问是否需要下载。
解决这个问题的方法是必须将相应的Http Head从
[html] Content-Type:&application/json&&
[html] Content-Type:&text/plain&&
具体的实现根据服务端不同有所区别，比如中可以在Controller中这样写：
[php] $this-&getServiceLocator()-&get('Application')-&getEventManager()-&attach(\Zend\Mvc\MvcEvent::EVENT_RENDER,&function($event){&&&&&&$event-&getResponse()-&getHeaders()-&addHeaderLine('Content-Type',&'text/plain');&&},&-10000);&&
这也是我在stackoverflow上的对
jQuery File Upload UI的构成与说明
为了引入更多功能，jQuery File Upload在上面最简模型的基础上又实现了一套jQuery File Upload UI，也就是官方给出的最终Demo，这套UI额外提供了以下功能：
最大/最小文件限定 Options.maxFileSize / Options.mixFileSize文件类型限定，通过正则表达式检测文件名实现 Options.acceptFileTypes选择文件后自动上传 Options.autoUpload上传文件数量限制，通过上传后将选择文件按钮置为Disabled实现 Options.maxNumberOfFiles上传模板，就是选择文件后显示预览的html代码 Options.uploadTemplate下载模板，当文件上传完毕后显示的html代码 Options.downloadTemplate
等等，同时还增加了一系列新的接口和事件，具体都可以查阅官方手册。
具体对应到文件为：
: JS模板引擎 : 图片预览功能js/jquery.fileupload-ui.js & css/jquery.fileupload-ui.css ： UI核心类，CSS可以替换旧式的上传控件为统一的按钮js/jquery.fileupload-fp.js：进度条扩展功能
也许正是因为附加功能太多，各功能之间耦合非常重，jQuery File Upload UI显得不够友好，主要体现在：
上述功能均无法拆分，必须统一全部加载各功能需要界面存在相应元素，如果缺少某些元素，包括JS模板内的元素，整个UI无法正常工作JS模板引擎对标签配对非常严格，标签如果遗漏也有可能引起UI无法正常工作
所以经验之谈是，在定制jQuery File Upload UI时，如果UI无法工作。首先检查js文件是否全部加载，然后检查页面元素是否齐全，再次检查JS模板标签是否严格配对，最后还可以查看页面是否有重复调用fileupload()方法。
jQuery File Upload UI构成元素
UI的部件都是硬编码的HTML class，无法更改。核心的几个部件为
全局控制按钮 (必须)
[html] &class="fileupload-buttonbar"&&&&&&&&&&&class="fileinput-button"&type="file"&name="files[]"&multiple&&&&&&&&&&&type="submit"&class="start"Start&upload&&&&&&&&&&&type="reset"&class="cancel"Cancel&upload&&&&&&&&&&&type="button"&class="delete"Delete&&&&&&&&&&&type="checkbox"&class="toggle"&&&&
最外层容器为.fileupload-buttonbar，内部包含
文件选择按钮 .fileinput-button (必须)，内部必须包裹一个input:file开始上传按钮 .start取消上传按钮 .cancel删除按钮 .delete文件勾选按钮 .toggle
整体上传进度 (可选)
[html] &class="fileupload-progress"&&&&&&&class="progress"&&&&&&&&&&&class="bar"&style="width:0%;"&&&&&&&&&&&&&class="progress-extended"&&&&最外层容器为.fileupload-progress，内部包含
上传进度条容器.progress上传进度条 .bar上传进度文本 .progress-extended
文件显示容器 (必须)
[html] &class="files"&&
.file容器是最重要的UI部件，上传时的文件预览模板以及上传完毕后的文件显示模板都将显示在这里。
文件预览模板 (必须)
[html] &id="template-upload"&type="text/x-tmpl"&&{%&for&(var&i=0,&&file=o.files[i];&i++)&{&%}&&&class="template-upload"&&&&&&{%&if&(file.error)&{&%}&&&&&&&&&&&class="error"{%=file.error%}&&&&&&{%&}&else&{&%}&&&&&&&class="preview"&class="fade"&&&&&&&class="name"{%=file.name%}&&&&&&&class="size"{%=o.formatFileSize(file.size)%}&&&&&&&class="progress&progress-success&progress-striped&active"&role="progressbar"&aria-valuemin="0"&aria-valuemax="100"&aria-valuenow="0"&style="height:5"&class="bar"&style="width:0%;"&&&&&&&class="start"&&&&&&&&&&{%&if&(!o.options.autoUpload)&{&%}&&&&&&&&&&&&&&Start&Upload&&&&&&&&&&{%&}&%}&&&&&&&&&&&&{%&}&%}&&&&&&&class="cancel"Cancel&&&&{%&}&%}&&&&
这部分逻辑不难读懂，由于文件选择是多选的，所以被选择文件一开始以数组方式存放，循环输出。即使我们加入最大文件只能上传一个，这里得到的仍然是数组形式。
当文件有任何错误时，如文件类型被禁止，文件大小不符合约定，会得到file.error。文件检测没有问题，则可以用以下元素控制当前文件：
开始上传当前文件按钮.start (必须)取消上传当前文件按钮.cancel (可选)当前文件上传进度.progress (可选)
上传后文件回调显示模板 (必须)
[javascript] &script&id="template-download"&type="text/x-tmpl"&&&{%&for&(var&i=0,&&file=o.files[i];&i++)&{&%}&&&div&class="template-download"&&&&&&&{%&if&(file.error)&{&%}&&&&&&&&&&&div&class="error"&{%=file.error%}&/div&&&&&&&&&&&&span&class="cancel"&&button&class="btn&btn-block"&&i&class="icon-ban-circle"&&/i&Cancel&/span&&&&&&&{%&}&else&{&%}&&&&&&&div&class="preview"&&img&src="{%=file.thumbnail_url%}"&&/div&&&&&&&&div&class="name"&&span&{%=file.name%}&/span&&/div&&&&&&&&div&class="size"&&span&{%=o.formatFileSize(file.size)%}&/span&&/div&&&&&&&&div&class="delete"&&button&data-type="{%=file.delete_type%}"&data-url="{%=file.delete_url%}"&Delete&/button&&&&&&&&/div&&&&&&&{%&}&%}&&&/div&&&{%&}&%}&&&/script&&&这一部分的o.files完全来自服务器端的json响应，所以模板内容可以自由发挥。唯一被定制的元素为删除按钮.delete。 点击这个按钮会向按钮中指定的url发送请求，比如
[html] &class="delete"&data-type="DELETE"&data-url="/file/1"Delete&&点击后则会用DELETE方式发送HTTP请求
DELETE /file/1
jQuery File Upload UI工作流程
有了上面罗列的UI元素，就可以拼凑出一个简单的jQuery File Upload UI工作流程：
用户点击.fileinput-button选择要上传的文件（多个）文件选择后，文件信息被整理为数组置入文件预览模板#template-upload模板引擎循环处理文件信息并生成模板.template-upload每生成一个模板，模板就被插入到文件显示容器.files的最后。用户点击上传按钮.start上传，文件信息被转换为XHR请求至服务器端UI获得服务器端生成JSON响应文件JSON响应信息也被整理成数组置入回调显示模板#template-download模板引擎循环处理文件信息并生成模板.template-download每生成一个模板，会将此模板替换对应的.template-upload部分
有了上面的基础，要个性化的定制jQuery File Upload就简单了很多：
限制文件类型
由于没有使用Flash空间，上传的文件选择框是无法限制文件类型的，所以所谓的限制文件类型，只能让用户选择文件之后，用file.error显示一个错误信息。例如本次需要限定可上传的文件为图片，那么Options指定：
[html] acceptFileTypes:&&/(\.|\/)(gif|jpe?g|png)$/i&&
在Google Chrome浏览器中，可以用input:file原生支持文件类型限定，可以配合使用：
type="file" name="upload[]"
accept="image/png, image/gif, image/jpg, image/jpeg"&
不过在客户端做再多的限定也只是提升用户体验，不能真正保证安全性，所以不要忘记了在服务器端做同样的类型检测。
文件数量限制
只需在Options指定
maxNumberOfFiles : 1
即可。jQuery File Upload UI的处理方式是当用户上传一个文件后，文件选择按钮被置为Disabled。
这同样只是客户端的小把戏，真正想要严格的约束用户只能上传一个文件还是需要在服务器端通过Session做更加复杂的控制。
文件大小限制
Options中指定
maxFileSize: 5000000
即只允许单文件最大5MB。
Firefox disable bug
在Firefox环境下测试是，发现如果将文件数量限制为1，选择一次文件，刷新页面之后文件选择按钮会莫名其妙的被加上一个Disabled属性，导致无法点击。所以最终我们的初始化代码为：
[html] var&uploader&=&$("#fileupload");&&uploader.fileupload({&&&&&&dataType:&'json',&&&&&&autoUpload:&false,&&&&&&acceptFileTypes:&&/(\.|\/)(gif|jpe?g|png)$/i,&&&&&&maxNumberOfFiles&:&1,&&&&&&maxFileSize:&5000000&&&});&&uploader.find("input:file").removeAttr('disabled');&&
最后就是界面的一些调整，完整代码在的File模块下，.
ajaxfileupload.js问题汇总及解决 附修复版下载（转）
&|&阅：1&&转：2&&
使用Jquery做上传文件处理时，用到了ajaxfileupload.js 这个第三方代码，但是这个js几乎就是半成品，问题很多。现在整理如下并附修复版的ajaxfileupload.js下载。
1：无法带参数提交，只能上传文件；
2：运行时报：jQuery.handleError is not a function 错误；
3：执行成功后，始终指向error方法处理，无法执行sucess方法；
解决方法：
1：无法带参数提交，只能上传文件；
原作者一定是把这个代码当作练习来写的，只完成了文件提交这个功能。需要对代码做些许修改即可。有两处修改：
第一处是将原createUploadForm: function(id, fileElementId) 方法添加一个data参数，并将data中的数据拼接进去即可。代码如下：
12345678910111213141516171819202122232425262728293031&br /&&&&&createUploadForm: function(id, fileElementId,data) {&br /&&&&&&&&&var formId = 'jUploadForm' +&br /&&&&&var fileId = 'jUploadFile' +&br /&&&&&var form = jQuery('&form
action=&& method=&POST&
name=&' + formId + '&
id=&' + formId + '&
enctype=&multipart/form-data&&&/form&');&br
/&&&&&var oldElement = jQuery('#' + fileElementId);&br /&&&&&var newElement = jQuery(oldElement).clone();&br /&&&&&jQuery(oldElement).attr('id', fileId);&br /&&&&&jQuery(oldElement).before(newElement);&br /&&&&&jQuery(oldElement).appendTo(form);&/p&&&p&&&&&&br /&&&&&if (data) {&br /&&&&&for (var i in data) {&br /&&&&&$('&input
type=&hidden& name=&' + i +
'& value=&' + data[i] +
'& /&').appendTo(form);&br /&&&&&}&br /&&&&&}&/p&&&p&&&&&&&&&jQuery(form).css('position', 'absolute');&br /&&&&&jQuery(form).css('top', '-1200px');&br /&&&&&jQuery(form).css('left', '-1200px');&br /&&&&&jQuery(form).appendTo('body');&br /&&&&&return &br /&&&&&},&br /&&&&&
第二处 是调用createUploadForm方法地方，如下所示：
2：运行时报：jQuery.handleError is not a function 错误；
这个错误是由于ajaxfileupload.js 是在jquery1.4.2版本之前写的，Jquery之后的版本已经没有了handleError 方法，所以可以将1.4.2版本中的该方法复制到该js中。
3：执行成功后，始终指向error方法处理，无法执行sucess方法；
这个是由于ajaxfileupload.js 处理返回data的时候，没有考虑后台返回的是字符串的问题(即使返回的JSON格式数据，我们也大多喜欢转化为字符串来返回)。修改uploadHttpData方法：
带参数提交示例代码：
修复版ajaxfileupload.js 下载
jQuery File Upload 的基本使用http://doc.okbase.net/1995545/archive/122107.html
发表于5个月前( 14:32)&&
阅读（437）&|&评论（）
4人收藏此文章,
jQuery File Upload 的基本使用
jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
一、最少配置
12345678910111213&!DOCTYPE&HTML&&html&&head&&meta&charset="utf-8"&&title&jQuery&File&Upload&Example&/title&&/head&&body&&input&id="fileupload"&type="file"&name="files[]"&data-url="server/php/"&multiple&&script&src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&&/script&&script&src="js/vendor/jquery.ui.widget.js"&&/script&&script&src="js/jquery.iframe-transport.js"&&/script&&script&src="js/jquery.fileupload.js"&&/script&&script&$(function&()&{&&&&$('#fileupload').fileupload({&&&&&&&&dataType:&'json',&&&&&&&&done:&function&(e,&data)&{&&&&&&&&&&&&$.each(data.result.files,&function&(index,&file)&{&&&&&&&&&&&&&&&&$('&p/&').text(file.name).appendTo(document.body);&&&&&&&&&&&&});&&&&&&&&}&&&&});});&/script&&/body&&&/html&
二、上传进度显示
1234567$('#fileupload').fileupload({&&&&/*&...&*/&&&&progressall:&function&(e,&data)&{&&&&&&&&var&progress&=&parseInt(data.loaded&/&data.total&*&100,&10);&&&&&&&&$('#progress&.bar').css(&&&&&&&&&&&&'width',&&&&&&&&&&&&progress&+&'%'&&&&&&&&);&&&&}});
12345&div&id="progress"&&&&&&div&class="bar"&style="width:&0%;"&&/div&&/div&&.bar&{&&&&height:&18&&&&background:&}
附上官网API地址：
文档地址： jQuery-File-Upload 插件使用www.tuicool.com/articles/63mQN3
作用：1、图片ajax提交 2、即时显示
插件地址：https://blueimp.github.io/jQuery-File-Upload/实例地址：http://www.phpno.com/jQuery-File-Upload-master/demo.html
使用步骤：
1、页面引入特定的js（至少引入一下4个js）
src="http://btc.phpno.com/js/jquery/1.9.1.min.js?=1.03"&&
src="js/vendor/jquery.ui.widget.js"&&
src="js/jquery.iframe-transport.js"&&
src="js/jquery.fileupload.js"&&
2、布置form表单
action="b.php" method="post"&
id="fileupload" type="file" name="image" data-url="./a.php" multiple&
class="files"&
style="clear:"&&
class="up_progress"&
class="progress-bar"&&
style="clear:"&&
type="submit"&Submit&
3、js编写以及css样式控制
type="text/javascript"&
$("#fileupload").fileupload({
dataType: 'json',
add: function (e, data) {
var numItems = $('.files .images_zone').
if(numItems&=10){
alert('提交照片不能超过3张');
return false;
$('.up_progress .progress-bar').css('width','0px');
$('.up_progress').show();
$('.up_progress .progress-bar').html('Uploading...');
data.submit();
done: function (e, data) {
$('.up_progress').hide();
$('.upl').remove();
var d = data.
if(d.status==0){
alert("上传失败");
var imgshow = '&div class="images_zone"&&input type="hidden" name="imgs[]" value="'+d.msg+'" /&&span&&img src="'+d.msg+'"
/&&/span&&a href="javascript:;"&删除&/a&&/div&';
jQuery('.files').append(imgshow);
progressall: function (e, data) {
console.log(data);
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.up_progress .progress-bar').css('width',progress + '%');
$('.files').on({
mouseenter:function(){
$(this).find('a').show();
mouseleave:function(){
$(this).find('a').hide();
},'.images_zone');
$('.files').on('click','.images_zone a',function(){
$(this).parent().remove();
type="text/css"&
.images_zone{position: width:120height:120 overflow: float: margin:3px 5px 3px 0; background:#f0f0f0;border:5px solid #f0f0f0; }
.images_zone {display:table-text-align:vertical-align:overflow:width: 120height: 120}
.images_zone
{width:120 vertical-align:}
.images_zone {text-align: position:bottom:0left:0background:rgba(255,255,255,0.5); display:width:100%; height:20line-height:20 display: font-size:12}
.up_progress{width: 300height: 13font-size: 10line-height: 14overflow:background: #e6e6e6;margin: 5px 0;display:}
.up_progress .progress-bar{height: 13background: #11ae6f;float:color: #fff;text-align:width:0%;}
4、程序端代码编写
header('Content-type: application/json');
if($_FILES["image"]["error"]!=0){
$result = array('status'=&0,'msg'=&'上传错误');
echo json_encode($result);exit();
if( !in_array($_FILES["image"]["type"], array('image/gif','image/jpeg','image/bmp')) ){
$result = array('status'=&0,'msg'=&'图片格式错误');
echo json_encode($result);exit();
if($_FILES["image"]["size"] & 2000000){
$result = array('status'=&0,'msg'=&'图片大小超过限制');
echo json_encode($result);exit();
$filename = substr(md5(time()),0,10).mt_rand(1,10000);
$ext = pathinfo($_FILES["image"]["name"], PATHINFO_EXTENSION);
$localName = "./imgs/".$filename.'.'.$ext;
if ( move_uploaded_file($_FILES["image"]["tmp_name"], $localName) == true) {
$lurl = 'http://api.gongchang.com/jQuery-File-Upload-master/'.$localName;
= array('status'=&1,'msg'=&$lurl);
= array('status'=&0,'msg'=&'error');
echo json_encode($result);
5、就此完成
注：事件监控需要使用jquery的on函数jQuery插件之ajaxFileUpload详细解析http://www.wfuyu.com/htmlcss/21693.html
功能：ajaxFileUpload是一个异步上传文件的jQuery插件
语法：$.ajaxFileUpload([options])
options参数说明：
url　 上传处理程序地址。
fileElementId　　　需要上传的文件域的ID，即的ID。
secureuri　　　　 是否启用安全提交，默认为false。
dataType　　　　 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
success　　　　　 提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
error　　　　　　 提交失败自动执行的处理函数。
data 　　　　　　 自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。
type 　　　　　　 当要提交自定义参数时，这个参数要设置成post。
1，SyntaxError: before statement错误 如果出现这个错误就需要检查url路径是否可以访问
2，SyntaxError: syntax error错误 如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误
3，SyntaxError: invalid property id错误 如果出现这个错误就需要检查文本域属性ID是否存在
4，SyntaxError: missing } in XML expression错误 如果出现这个错误就需要检查文件name是否一致或不存在
5，其它自定义错误 大家可使用变量$error直接打印的方法检查各参数是否正确，比起上面这些无效的错误提示还是方便很多。
使用方法：
1.先引入jQuery与ajaxFileUpload插件，注意先后顺序。
&script src=jquery-1.7.1.js type=text/javascript&&/script&
&script src=ajaxfileupload.js type=text/javascript&&/script&
2.HTML代码段
&script src=jquery-1.7.1.js type=text/javascript&&/script&
&script src=ajaxfileupload.js type=text/javascript&&/script&
&script type=text/javascript&
$(function ()
$(:button).click(function ()
ajaxFileUpload();
function ajaxFileUpload()
$.ajaxFileUpload({
url: '/upload.x', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: 'file1', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
$(#img1).attr(src, data.imgurl);
if (typeof (data.error) != 'undefined'){
if (data.error != '') {
alert(data.error);
alert(data.msg);
error: function (data, status, e)//服务器响应失败处理函数
4.后台页面upload.aspx代码
protected void Page_Load(object sender, EventArgs e)
HttpFileCollection files = Request.F
string msg = string.E
string error = string.E
if (files.Count & 0)
files[0].SaveAs(Server.MapPath(/) + System.IO.Path.GetFileName(files[0].FileName));
msg = 成功! 文件大小为: + files[0].ContentL
imgurl = / + files[0].FileN
string res = { error:' + error + ', msg:' + msg + ',imgurl:' + imgurl + '};
Response.Write(res);
Response.End();
喜欢该文的人也喜欢}