jquery jQuery-File-Upload 例子-jquery-电脑编程网jquery jQuery-File-Upload 例子作者：tivonHou　和相关&&
网上-file-upload的例子 都过于简单，在项目中这个插件经常使用，写个例子供参考。
下面介绍 用插件实现图片异步上传的代码。
1&& 比要的js一个都不能少，他们之间是有依赖关系的。
-1.8.2.min.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.fileupload.js
jquery.iframe-transport.js
jquery.fileupload-process.js
jquery.fileupload-validate.js
（最后2个js是有依赖的，缺少的话acceptFileTypes，maxFileSize 不会进行验证）
2& 贴代码：
$(function () {
uploadImageAjaxDelete = function (url,obj){
$.({url:url,async:false,dataType:"text",success:function(data){
if(data=='1'){
//如果删除成功，恢复file的使用，同时是图片渐变消失
$(obj).parent().children("input[type='file']").removeAttr("disabled");
$(obj).parent().children("img").fadeOut("slow",function(){
$(this).add($(obj).parent().children("a")).add($(obj).parent().children("input:hidden")).add($(obj).parent().children("br")).remove();
alert('图片删除失败！');
$("input[type='file']").fileupload({
url: 'image__save.action',
dataType: 'json',
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 2097152// 2 MB
}).on('fileuploadadd', function (e, data) {
$(this).parent().children("label").remove();
$("&p class='uploadImgLoad'&上传中... 0%&/p&").appendTo($(this).parent());
$(this).attr("disabled",true);
}).on('fileuploadprocessalways', function (e, data) {
if(data.files.error){
$(this).parent().children("p").remove();
$(this).removeAttr("disabled");
if(data.files[0].error=='acceptFileTypes'){
$(this).parent().append("&label class='error'&图片类型错误&/label&");
if(data.files[0].error=='maxFileSize'){
$(this).parent().append("&label class='error'&图片不能大于2M&/label&");
}).on('fileuploadprogressall', function (e, data) {
var $p = $(this).parent().children("p");
var progress = parseInt(data.loaded / data.total * 100, 10);
if($p.length==0){
$("&p class='uploadImgLoad'&上传中... "+progress+"%&/p&").appendTo($(this).parent());
(progress);
$p.text('上传中... '+progress+'%');
if(progress==100){
$p.fadeOut("slow",function(){
$(this).remove();
}).on('fileuploaddone', function (e, data) {
if(data.result.result=='error'){
$(this).removeAttr("disabled");
alert('抱歉，上传过快，请稍等！');
}else if(data.result.result=='success'){
$(this).parent().prepend($("&a href='#' &
删除&/a&").attr("onclick","uploadImageAjaxDelete('image_ajax_delete.action?dbFileName="+data.result.dbFileName+"',this)").add("&br/&"))
.prepend($("&img
width='140' height='90' border='0' /&").attr("src",data.result.url))
.prepend($("&input type='hidden' name="+data.result.hiddenName+" id="+data.result.hiddenName+" value='"+data.result.dbFileName+"' /&"));
3效果：见附件图片。
4 注意：操作的时候一定查看：API,Demo
/blueimp/jQuery-File-Upload/wiki/API
http://blueimp.github.io/jQuery-File-Upload/basic.html
此外 fireFox 的 debug插件配合使用，有脚本输出的断点功能，以及的显示。
在使用中如有问题，请给我留言，共同探讨..进步。
相关资料：｜｜｜｜jquery jQuery-File-Upload 例子来源网络，如有侵权请告知，即处理！编程Tags：　　　　　　　　　　　　　　　　&　　　　　　　　　　　　　　　　　　　　插件描述：jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
下载文件更新时间：（修改官网调用地址不能访问问题）jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。jQuery File Upload有多个文件选择，拖放上传控件拖放支持，进度条，验证和预览图像，音频和视频 。支持跨域，分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持标准的HTML表单文件上传。产品特点多文件上传：允许选择多个文件一次，并将其上传同时进行。拖放支持：可以从您的桌面或文件管理器中拖放他们在您的浏览器窗口中上传文件。上传进度条：显示一个进度条显示为单独的文件和所有上传组合上传进度。可取消上传：单个文件上传可以取消来停止上传进度。可恢复上传：中止的上传可以与浏览器支持的Blob API进行恢复。分块上传：大文件可以上传较小的块与浏览器支持的Blob的API 。客户端图像大小调整：图像可以自动调整大小的客户端与浏览器支持所需的JS API的。预览图像，音频和视频：图像，音频和视频文件的预览可以与浏览器支持所需的API上传前显示。没有浏览器插件（例如使用Adobe的Flash ）要求：该实现是基于开放的标准，如HTML5和JavaScript的，不需要额外的浏览器插件。优美的后备旧版的浏览器：如果支持的话，使用内置页框作为后备旧版浏览器通过的XMLHttpRequest上传文件。HTML文件上传表单回退：通过使用标准的HTML文件上传表单的控件元素允许渐进增强。跨站点的文件上传：支持上传文件到不同的域与跨站点的XMLHttpRequest或iframe重定向。多个插件实例：允许使用在同一个网页上的多个插件实例。可定制和可扩展的：提供了一个API来设置各个选项，并定义回调方法的各种载事件。多重和文件内容流上传：文件可以被上传为标准的“多部分/窗体的数据”或文件内容流（ HTTP PUT文件上传） 。兼容任何服务器端应用平台：适用于任何服务器端平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.） ，支持标准的HTML表单文件上传。用法下载压缩包，解压到网站就可用（与demo）一样（PHP环境）。最小化安装向导（适用于需要自己定义界面元素的童鞋）：需要一个input元素：&input id=&fileupload& type=&file& name=&file[]& multiple&需要加载的js文件有:jquey-1.8.3.min.jsjquery-ui-widget.jsjquery.iframe-transport.jsjquery.fileupload.js代码例子（摘自官方）：&!DOCTYPE&HTML&
&meta&charset=&utf-8&&
&title&jQuery&File&Upload&Example&/title&
&input&id=&fileupload&&type=&file&&name=&files[]&&data-url=&server/php/&&multiple&
&script&src=&///ajax/libs/jquery/1.8.3/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&
$(function&()&{
&&&&$('#fileupload').fileupload({
&&&&&&&&dataType:&'json',
&&&&&&&&done:&function&(e,&data)&{
&&&&&&&&&&&&$.each(data.result.files,&function&(index,&file)&{
&&&&&&&&&&&&&&&&$('&p/&').text(file.name).appendTo(document.body);
&&&&&&&&&&&&});
&/html&最小安装如何显示上传进度条：插件支持显示每个文件的上传进度(progress)显示和所有文件的总体上传进度(progressall)显示：$('#fileupload').fileupload({
&&&&/*&...&*/
&&&&progressall:&function&(e,&data)&{
&&&&&&&&var&progress&=&parseInt(data.loaded&/&data.total&*&100,&10);
&&&&&&&&$('#progress&.bar').css(
&&&&&&&&&&&&'width',
&&&&&&&&&&&&progress&+&'%'
&&&&&&&&);
});需要一个&div&容器用来显示进：&div&id=&progress&&
&&&&&div&class=&bar&&style=&width:&0%;&&&/div&
&/div&需要给进度条不同颜色显示才行，可以通过CSS来设置：.bar&{
&&&&height:&18
&&&&background:&
}将要上传的文件名显示在一个元素节点上：你可以经常要将上传的文件显示到特定的元素上，这个可以通过add回调函数来实现：$(function&()&{
&&&&$('#fileupload').fileupload({
&&&&&&&&dataType:&'json',
&&&&&&&&add:&function&(e,&data)&{
&&&&&&&&&&&&data.context&=&$('&p/&').text('Uploading...').appendTo(document.body);
&&&&&&&&&&&&data.submit();
&&&&&&&&},
&&&&&&&&done:&function&(e,&data)&{
&&&&&&&&&&&&data.context.text('Upload&finished.');
});如何通过点击按钮来开始上传：在上例基础上，可以通过按钮点击事件来触发上传（上例是自动上传）：$(function&()&{
&&&&$('#fileupload').fileupload({
&&&&&&&&dataType:&'json',
&&&&&&&&add:&function&(e,&data)&{
&&&&&&&&&&&&data.context&=&$('&button/&').text('Upload')
&&&&&&&&&&&&&&&&.appendTo(document.body)
&&&&&&&&&&&&&&&&.click(function&()&{
&&&&&&&&&&&&&&&&&&&&$(this).replaceWith($('&p/&').text('Uploading...'));
&&&&&&&&&&&&&&&&&&&&data.submit();
&&&&&&&&&&&&&&&&});
&&&&&&&&},
&&&&&&&&done:&function&(e,&data)&{
&&&&&&&&&&&&data.context.text('Upload&finished.');
相关插件-上传
讨论这个项目（52）回答他人问题或分享插件使用方法奖励jQ币
有没有人用过？
用这个插件的人相当多，群里很多问题都是关于这个的。
能一个群号吗。。用这个组件的群号
下载下来不能用啊，里面引用的好多js、css 根本都没有
下不能用吧。。。。能解决吗？
好像只用php环境下可以用吧
(＇.＇)nnn]0
各種不行，不能直接用，還得自己下js,css
slow_walker0
有哪位大神在java环境下写过？求教
node.js服务端，自己的例子可以实现上传，但是整合到项目中就不行，求解决。
dingchuan8860
感谢！！！！楼主真是帮了大忙了
经典搞笑部落0
demo有效吗？
demo有效 上传下载都没有问题 &但是在运行的过程中抛异常
__godlike0
很好，功能很全
是否支持手机上的使用
fantasmic0
非常好用！
请问你知道如果限制图片大小 &然后超过大小之后自定义报错样式吗
hedong01120
很好，功能很全
熊二 ㄆó′0
YES!!!today0
The photos to where?
有一个详细的文档么。看这么一窜 有什么用
好东西，谢谢
1?5?8?0?7?3?3?4?0?0?0?0
上面教程中的js和css和解压的不一样 , 搞了这么久发现还是用不了 ...............哎 浪费时间
很不错的东西 值得一用
微信里使用为啥不行，路径也是对的
没有比较完整的API说明？
卡其色的人生0
asp.net mvc 后天怎么处理 JsonResult不行吗 进入后台后前台接收不到返回数据 报500
昵称不能为空0
下载之后怎么用啊，运行不出来啊
垃圾东西都放到上面，毛都用不了
感觉不能用，API说明存在问题，需要放到一个form里面才可以！
猫咪爱吃-鱼-0
设置了autoUpload为true, 还需要data.submit()来触发上传吗
一个页面怎么放多个插件
迷茫小年轻0
demo下下来都跑不了。。
在同一个网页上的多个插件实例，这个改起来超费劲啊....
testliu1230
300M的文件一直上传失败
dome都跑不起，dome里面的文件和文档里面的文件不匹配，能不能专业点昵
用不了，还得自己改
该项目详细：github地址：/jasonycz/jQuery-File-Upload &配置详情： &&How to setup the plugin on your website看评论说很多人用不了，我这可以使用！
配置详情的链接：/blueimp/jQuery-File-Upload/wiki/Setup
如果文件不能上传 可能是你给下载下来的文件没有正确的权限 &chmod -R 777 &your_download_document&
捣鼓半天终于demo跑起来了，这个插件确实有挺坑的地方，第一，在index.html里面最下面引用jQuery地方，引的是谷歌的，在国内无法访问，所以要在本地重新引用jquery的包；第二,在server&php下有个files文件夹，权限要改为777，就是最高，其他同理；第三，当年上传一张图之后，在刚刚的files文件夹下回自动生成一个thumbnail文件夹，同样要再把权限改为777。完成！至于怎么修改权限，自行百度或者参考/article/4b52d70271edd4fc5d774b77.html
怎么获取 视频的最后路径?
上传flv视频不显示
PROMULGATOR
关注作者 (130)
收藏此插件 (188)
我当前jQ币余额：正在获取..
已下载次数：22204
所需jQ币：0jQuery文件上传插件Uploadify使用指南
字体：[ ] 类型：转载 时间：
支持多文件上传的jQuery文件上传插件Uploadify，目前此插件有两种版本即Flash版本和HTML5版本，
对于HTML5版本会比较好的支持手机浏览器，避免苹果手机Safari浏览器不支持Flash，主要特性：支持多文件上传、HTML5版本可拖拽上传、实时上传进度条显示、强大的参数定制功能，如文件大小、文件类型、按钮图片定义、上传文件脚本等。Flash版本使用方法：1.加载JS和CSS
代码如下:&&script src="jquery/1.7.1/jquery.min.js" type="text/javascript"&&/script&&script src="jquery.uploadify.min.js" type="text/javascript"&&/script&&link rel="stylesheet" type="text/css" href="uploadify.css"&
2.编写HTML内容
代码如下:&form&&div id="queue"&&/div&&input id="file_upload" name="file_upload" type="file" multiple="true"&&/form&3.函数调用
代码如下:&script type="text/javascript"&&&&&&&& $(document).ready(function()&&&&&&& {&&&&&&&&&&& $("#file_upload").uploadify({&&&&&&&&&&&&&&& 'uploader': 'uploadify.swf',&&&&&&&&&&&&&&& 'script': 'UploadHandler.php',&&&&&&&&&&&&&&& &&&&&&&&&&&&&&& 'folder': 'UploadFile',&&&&&&&&&&&&&&& 'queueID': 'fileQueue',&&&&&&&&&&&&&&& 'auto': true,&&&&&&&&&&&&&&& 'multi': true&&&&&&&&&&& });&&&&&&& });& &/script&
4.更多参数配置详解
uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。 script ：&& 后台处理程序的相对路径 。默认值：uploadify.php checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata method ： 提交方式Post 或Get 默认为Post scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain& folder ：& 上传文件存放的目录 。 queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。 queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。 multi ： 设置为true时可以上传多个文件。 auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。 fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”fileExt ： 设置可以选择的文件的类型，格式如：'*.*.*.rar' 。 sizeLimit ： 上传文件的大小限制 。 simUploadLimit ： 允许同时上传的个数 默认值：1 。 buttonText ： 浏览按钮的文本，默认值：BROWSE 。 buttonImg ： 浏览按钮的图片的路径 。 hideButton ： 设置为true则隐藏浏览按钮的图片 。 rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。 width ： 设置浏览按钮的宽度 ，默认值：110。 height ： 设置浏览按钮的高度 ，默认值：30。 wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。 cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标上面介绍的key值的value都为字符串或是布尔类型，比较简单，接下来要介绍的key值的value为一个函数，可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。onInit : 做一些初始化的工作onSelect ：选择文件时触发，该函数有三个参数event:事件对象。queueID：文件的唯一标识，由6为随机字符组成。fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。代码如下：
代码如下:&&script type="text/javascript"&$(document).ready(function(){&&& $("#uploadify").uploadify({&&&&&&& 'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',&&&&&&& 'script': 'UploadHandler.ashx',&&&&&&& 'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',&&&&&&& 'folder': 'UploadFile',&&&&&&& 'queueID': 'fileQueue',&&&&&&& 'auto': false,&&&&&&& 'multi': true,&&&&&&& 'onInit':function(){alert("1");},&&&&&&& 'onSelect': function(e, queueId, fileObj)&&&&&&& {&&&&&&&&&&& alert("唯一标识:" + queueId + "\r\n" +&&&&&&&&&&&&&&&&& "文件名：" + fileObj.name + "\r\n" +&&&&&&&&&&&&&&&&& "文件大小：" + fileObj.size + "\r\n" +&&&&&&&&&&&&&&&&& "创建时间：" + fileObj.creationDate + "\r\n" +&&&&&&&&&&&&&&&&& "最后修改时间：" + fileObj.modificationDate + "\r\n" +&&&&&&&&&&&&&&&&& "文件类型：" + fileObj.type&&&&&&&&&&& );&&&&&&& }&&& });});&/script&　　onSelectOnce ：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：fileCount：选择文件的总数。filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。allBytesTotal：所有选择的文件的总大小。onCancel： 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect 中的三个参数，data对象有两个属性fileCount和allBytesTotal。fileCount：取消一个文件后，文件队列中剩余文件的个数。allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。onClearQueue ：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数。onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。type：错误的类型，有三种‘HTTP', ‘IO', or ‘Security'info：错误的描述onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。onProgress ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队&列，在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed：percentage：当前完成的百分比bytesLoaded：当前上传的大小allBytesLoaded：文件队列中已经上传完的大小speed：上传速率 kb/sonComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speedfileCount：剩余没有上传完成的文件的个数。speed：文件上传的平均速率 kb/s注：fileObj对象和上面讲到的有些不太一样，onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，分别为：filesUploaded ：上传的所有文件个数。errors ：出现错误的个数。allBytesLoaded ：所有上传文件的总大小。speed ：平均上传速率 kb/s
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jQuery-File-Upload 插件使用
jQuery-File-Upload 插件使用
JSP:&%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&&%@ taglib prefix="c" uri="/jsp/jstl/core" %&&%@ taglib prefix="fn" uri="/jsp/jstl/functions" %&&%@ taglib prefix="fmt" uri="/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/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 插件使用/articles/63mQN3
作用：1、图片ajax提交 2、即时显示
插件地址：https://blueimp.github.io/jQuery-File-Upload/实例地址：/jQuery-File-Upload-master/demo.html
使用步骤：
1、页面引入特定的js（至少引入一下4个js）
src="/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 = '/jQuery-File-Upload-master/'.$localName;
= array('status'=&1,'msg'=&$lurl);
= array('status'=&0,'msg'=&'error');
echo json_encode($result);
5、就此完成
注：事件监控需要使用jquery的on函数jQuery插件之ajaxFileUpload详细解析/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();
发表评论：
TA的最新馆藏}