jquery uploadify插件多文件上传 - 给太阳洒水的博客 - ITeye博客
博客分类：
1、jquery uploadify 下载：
2、安装：解压后拷贝的工程目录下面，如：WebRoot/uploaddify
3、配置项说明：
uploader： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。
onInit :做一些初始化的工作。
　　 onSelect：选择文件时触发，该函数有三个参数
　 　event:事件对象。
　　 queueID：文件的唯一标识，由6为随机字符组成。
　　 fileObj：选择的文件对 象，有name、size、creationDate、modificationDate、type 5个属性
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/s
　　 onComplete：文件上传完成后触发。该函数有四个参数event、queueId、 fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两 个属性fileCount和speed
　　 fileCount：剩余没有上传完成的文件的个数。
　　 speed：文件上传 的平均速率 kb/s
　　 onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参 数，data有四个属性，分别为：
　　 filesUploaded :上传的所有文件个数。
　　 errors ：出现错误的个数。
　　 allBytesLoaded ：所有上传文件的总大小。
　　 speed ：平均上传速率 kb/s
　　相关函数介绍
　　在上面的例子中已经用了uploadifyUpload和 uploadifyClearQueue两个函数，除此之外还有几个函数：
　　 uploadifySettings：可以动态修改上面介绍 的那些key值，如下面代码
　　 $('#uploadify').uploadifySettings('folder','JS');
　 　如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中
&a　 href="javascript:$('#uploadify').uploadifySettings('folder','JS');
$('#uploadify').uploadifyUpload()"& 上传&/a&
　　 uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中 指定queueID的文件。
　　$('#uploadify').uploadifyCancel(id);
&%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" &
&title&uploadify-实例&/title&
&meta content="/intellisense/ie5" name="vs_targetSchema"&
&link href="uploadify/css/default.css" rel="stylesheet" type="text/css" /&
&link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" /&
&script type="text/javascript" src="uploadify/scripts/jquery-1.3.2.min.js"&&/script&
&script type="text/javascript" src="uploadify/scripts/swfobject.js"&&/script&
&script type="text/javascript" src="uploadify/scripts/jquery.uploadify.v2.1.0.min.js"&&/script&
&script type="text/javascript"&
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader'
: 'uploadify/scripts/uploadify.swf',
: 'UploadPhotoServlet',
'cancelImg'
: 'uploadify/cancel.png',
'buttonImg'
: 'uploadify/buttonImg.png',
: '/jxdBlog/photos',
: 'fileQueue',
: 'transparent',
'simUploadLimit' : 999,
: '*.*.*.*.*.jpeg',
'fileDesc'
: '图片文件(*.*.*.*.*.jpeg)',
'onAllComplete'
:function(event,data)
$('#result').html(data.filesUploaded +'个图片上传成功');
&style type="text/css"&
color:#333333;
font-family: "Tahoma";
font-size: 12
border:solid 1px #CCCCCC;
.buttoncss
color:#333333;
font-family: "Tahoma";
font-size: 12
background-color:#FFFFFF;
border:solid 1px #CCCCCC;
&table style="width: 90%;"&
&td style="width: 100"&
&input type="file" name="uploadify" id="uploadify" /&
&td align="left"&
&a href="javascript:$('#uploadify').uploadifyUpload()"&开始上传&/a&|
&a href="javascript:jQuery('#uploadify').uploadifyClearQueue()"&取消上传&/a&
&span id="result" style="font-size: 13color: red"&&/span&
&div id="fileQueue" style="width: 400height: 300 border: 2"&&/div&
这里需要用到commons-fileupload组件
所需要的包：
1、commons-fileupload-1.2.1.jar：
2、commons-io-1.4.jar：
* 文件上传实例
* @author samLee
public class UploadPhotoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public UploadPhotoServlet() {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
@SuppressWarnings("unchecked")
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//文件存放的目录
File tempDirPath =new File(request.getSession().getServletContext().getRealPath("/")+"\\upload\\");
if(!tempDirPath.exists()){
tempDirPath.mkdirs();
//创建磁盘文件工厂
DiskFileItemFactory fac = new DiskFileItemFactory();
//创建servlet文件上传组件
ServletFileUpload upload = new ServletFileUpload(fac);
//文件列表
List fileList =
//解析request从而得到前台传过来的文件
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
ex.printStackTrace();
//保存后的文件名
String imageName =
//便利从前台得到的文件列表
Iterator&FileItem& it = fileList.iterator();
while(it.hasNext()){
FileItem item =
it.next();
//如果不是普通表单域，当做文件域来处理
if(!item.isFormField()){
imageName = new Date().getTime()+Math.random()*10000+item.getName();
BufferedInputStream in = new BufferedInputStream(item.getInputStream());
BufferedOutputStream out = new BufferedOutputStream(
new FileOutputStream(new File(tempDirPath+"\\"+imageName)));
Streams.copy(in, out, true);
PrintWriter out =
out = encodehead(request, response);
} catch (IOException e) {
e.printStackTrace();
//这个地方不能少，否则前台得不到上传的结果
out.write("1");
out.close();
* Ajax辅助方法 获取 PrintWriter
* @throws IOException
* @throws IOException
* request.setCharacterEncoding("utf-8");
response.setContentType("text/ charset=utf-8");
private PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/ charset=utf-8");
return response.getWriter();
　　 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：选择文件到文件队列中后的每一个文件上的关闭按钮图标，
下载次数: 3667
下载次数: 2062
浏览 121718
sumaolin 写道&&&&& lz的jsp页面中的配置& 'folder'&&&&&&&& : '/jxdBlog/photos',& 起什么作用啊？我的怎么就是servlet中的配置起作用啊其实这个地方对我自己来说是没用的，也许你也是在后台设置目录的，所以也没用好久前的项目啦，当时还弄java呢，现在前端了
&&&&& lz的jsp页面中的配置& 'folder'&&&&&&&& : '/jxdBlog/photos',& 起什么作用啊？我的怎么就是servlet中的配置起作用啊
其实这个地方对我自己来说是没用的，也许你也是在后台设置目录的，所以也没用
给太阳洒水
浏览: 351492 次
来自: 上海
点亮了，感谢
对了 部署完跑起来了
可以参考最新的文档：如何在eclipse jee中检出项目并转 ...
把这句去掉，你就挂了&!DOCTYPE configur ...
不行，没什么用使用带上传进度条的jQuery-File-Upload时,经常问的问题及答案_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
使用带上传进度条的jQuery-File-Upload时,经常问的问题及答案
&&单文件多文件上传,单个进度条,整体进度,文件分页,上传前预览,基于bootstarp的ui。一直感觉,只有这样才是上传。
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩5页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢最适合中国国情的jquery file upload 批量上传改版插件,结合spring mvc - 为程序员服务
最适合中国国情的jquery file upload 批量上传改版插件,结合spring mvc
如题所述，也许真是最适合中国开发者项目的 jquery file upload 改版的插件，这是一个利用HTML5 的文件上传的插件，用google 直接可以搜索 "jquery file upload " 可以直接到 github 的网站下载这个插件的最新版。也许你看到这个文章的时候，插件已经更新了，但不妨碍中国人如何使用这个插件，因为重要的是思路。在做项目中发现了官网的插件有如下几个问题：1. 批量上传，并不是真正的批量上传，比如，在chrome firefox 浏览器下，可以一次选择多个文件，这是可以一次批量上传的，但如果是 IE ，选择多个文件，需要多次选择。即使是 chrome 也有多次选择的情况，如果要将多次选择的文件一次提交，jquery file upload 是做不到了，即使你设置了 "singleFileUploads:false" . 所以这是需要改进的地方.2. 既然上传有上面所说的问题，那么取消按钮，自然也有这个问题。如果是一次选择了多个文件，点击某一个文件后面的 取消 按钮，可能将所有这一次选取的文件全部取消，这也不符合中国人开发习惯，正确的应该是一个一个取消。3. 在IE 浏览器下有BUG, 只能上传第一个文件，不能上传多个文件，应为ie 是利用 IFRAME 上传文件，所以需要修改 iframe 上传的部分代码.4. 如果你是副客户端开发，第一次load 进 jquery file upload 的所有js 后，并且上传文件之后 ，那么第二次再上传文件，是不行的，除非刷新页面，重新加载 jquery file upload 的js 文件， 才可以。这些需要加上“$["blueimp"]["fileupload"] = ” 才可以.5. 富客户端开发，还有一个问题，就是在上传完之后，最好 修改 jquery file upload 在每个 tr&&上绑定的data 缓存。并修改 button property。 这种做的目的是万一出错了，返回到前台，前台可以再次提交，否则不可能提交.其实这些所有的问题，除了IE 只能上传一个文件只玩，都可以通过 自己 扩展 jquery file upload 来实现，jquery file upload 本身也提供了相应的 机制，比如在我后面提供的代码中if (![].map){
    Array.prototype.some = function(f,scope){
        for(var i=0,n=this.i&n;i++){
            if((i in this) && f.call(scope,this[i],i,this)){
                
            }
        }
        
    };
    Array.prototype.forEach = function(f,scope){
        for(var i=0,n=this.i&n;i++){
            (i in this) && f.call(scope,this[i],i,this);
        };
    };
$(function () {
    //列表项模板
var template = '{{each files}}&tr class="template-upload fade in"&'+
' &p class="name"&${name}&/p&
&p class="size"&${size} KB&/p&'+
&div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"&&div class="bar" style="width:0%;"&&/div&&/div&'+
&button class="btn btn-primary start" style="display:"&'+
&i class="icon-upload icon-white"&&/i&'+
&span&Start&/span&'+
&/button&'+
&button onclick="cancelUpload(this,\'${name}${size}\')"&'+
&i class="icon-ban-circle icon-white"&&/i&'+
&span&Cancel&/span&'+
'&/tr&{{/each}}';
var url = 'http://localhost:8080/fileupload/rest/controller/upload';
$["blueimp"]["fileupload"] =
$('#fileupload').fileupload({
    autoUpload: false,
dataType: 'json',
singleFileUploads:false,
uploadTemplateId:null,
downloadTemplateId:null,
maxFileSize : ,
uploadTemplate:function(data){
    return $.tmpl(template,data);
done:function(e,data){
    //data.jqXHR =
    var fileTrs = $(".template-upload",e.currentTarget);
    fileTrs.each(function(){
        //alert($(this).data("data"));
        var item = $(this).data("data");
        //if (!datas.some(function(x){return x ===})){
    //    datas.push(item);
    //}
        item.jqXHR =
        $(this).find(".start").prop('disabled', false);
    });
    alert("done");
}).bind("fileuploadadded",function(e,data){
    var datas = [data];
    var fileTrs = $(".template-upload",e.currentTarget);
    fileTrs.each(function(){
        //alert($(this).data("data"));
        var item = $(this).data("data");
        if (!datas.some(function(x){return x ===})){
        datas.push(item);
    }
    });
    
    function concat(objs,propName){
        
        var list = [];
        //alert(propName);
        objs.forEach(function(x){
            list = list.concat(x[propName]);
        });
        
    }
    
    data.fileInputs = [data.fileInput];
    ["files","originalFiles","paramName","fileInputs"].forEach( function(x){
        
        data[x] = concat(datas,x);
    });
    data.context = fileT
    fileTrs.each(function(){
        $(this).data("data",data);
    });
    
window.cancelUpload = function(button,fileNameAndSize){
    var row = $(button).closest(".template-upload");
    var data = row.data("data");
    var i = 0;
    for(;i&data.files.i++){
        if (data.files[i].name + (data.files[i].size?data.files[i].size:"") === fileNameAndSize){
            
        }
    }
    $(row).remove();
    ["files","originalFiles","paramName","fileInputs"].forEach(function(x){
        data[x].splice(i,1);
    });
    data.context = $(".template-upload");
    
$('#fileupload').bind('fileuploadsubmit', function (e, data) {
var mytitle = $('#mytitle');
var mytext = $('mytext');
alert(mytitle.val());
data.formData = {myTitle: mytitle.val(),myText:mytext.val()};
if (!data.formData.myTitle) {
mytitle.focus();
});ie 下上传文件，通过IFRAME ,需要修改 "jquery.iframe-transport.js" 这个文件，大概在 137 行的地方，修改成如下for(var ii=0;ii&options.fileInputs.ii++){
    form.append(options.fileInputs[ii]);
// add end.
//disabled by customer
//.append(options.fileInput)
.prop('enctype', 'multipart/form-data')
// enctype must be set as encoding for IE:
.prop('encoding', 'multipart/form-data');
form.submit();另外，jquery file upload&&基本是通过css 样式去绑定事件的，比如".start" ".files", ".cancel" 等都很重要，很多事件都是通过jquery选择样式，然后绑定的。另外，上传的文件对象都是绑定在 &tr& 对象上面，这里涉及到了juqery.data ,缓存的使用。我在这里提供一个 spring mvc&&结合 jquery file upload 的例子，可以下载参考.整个 file upload 的源代码 (juqery file upload source code free download,not include jar files)
原文地址：, 感谢原作者分享。
您可能感兴趣的代码网站已改版，请使用新地址访问：
file_upload Jquery 实现精美的多文件上传组件,搭配ssh 框架的类 ，包含详细使用说明书，只要会 Ajax 238万源代码下载-
&文件名称: file_upload
& & & & &&]
&&所属分类:
&&开发工具: Java
&&文件大小: 304 KB
&&上传时间:
&&下载次数: 210
&&提 供 者:
&详细说明：Jquery 实现精美的多文件上传组件,搭配ssh 框架的类文件，包含详细使用说明书，只要会ssh 的一看就能使用-Jquery to achieve multi-file upload component beautiful, with ssh framework class file that contains detailed instruction manual, so long as you can use ssh for a look
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&文件上传组件\UploadAction.java&&............\UploadForm.java&&............\Uploadify v2.1.0 Manual.pdf&&............\upload_file\example\css\default.css&&............\...........\.......\...\uploadify.css&&............\...........\.......\...\_notes\dwsync.xml&&............\...........\.......\index.jsp&&............\...........\.......\scripts\cancel.png&&............\...........\.......\.......\check.php&&............\...........\.......\.......\expressInstall.swf&&............\...........\.......\.......\jquery-1.3.2.min.js&&............\...........\.......\.......\jquery.uploadify.v2.1.0.js&&............\...........\.......\.......\jquery.uploadify.v2.1.0.min.js&&............\...........\.......\.......\swfobject.js&&............\...........\.......\.......\uploadify.jsp&&............\...........\.......\.......\uploadify.swf&&............\...........\.......\.......\_notes\dwsync.xml&&............\...........\.......\_notes\dwsync.xml&&............\使用说明书.doc&&............\upload_file\example\css\_notes&&............\...........\.......\scripts\_notes&&............\...........\.......\css&&............\...........\.......\scripts&&............\...........\.......\uploads&&............\...........\.......\_notes&&............\...........\example&&............\upload_file&&文件上传组件
&[]:纯粹是垃圾&[]:一般，勉强可用&[]:纯粹是垃圾&[]:很好，推荐下载
&近期下载过的用户:
&相关搜索:
&&&&&&&&&&
&输入关键字，在本站238万海量源码库中尽情搜索：
&[] - jquery学习的帮助性文档，可以说是不错的工具书。
&[] - jquery的多附件上传插件，实现了添加多附件上传的功能
&[] - HTML的Word文档,是很非常好用的一个源码。。。
&[] - Java + Flex 上传图片，具有上传前预浏览的功能！
&[] - ext +asp 做的批量上传修改图片。
&[] - 功能描述:网络硬盘源码
功能描述:网络硬盘源码
&[] - 带进度条的文件上传，
功能齐全,欢迎大家下载，相互学习
&[] - java实现文件上传下载功能,如：图片，文件等
&[] - 一个万能的文件打印模块附源代码
内有详细说明书}