最适合中国国情的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"] = false; ” 才可以.

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.length;i'+
      
        ''+
           ' 
${name}
  '+          
        ''+
        ''+
        '    
${size} KB
'+
        '    
'+
        ''+
        ''+
        '    '+
        '       '+
        '       Start'+
        '    '+
        '    '+
        '       '+
        '       Cancel'+
        '            '+    
        ''+
    '{{/each}}';
    var url = 'http://localhost:8080/fileupload/rest/controller/upload';
    $["blueimp"]["fileupload"] = false;   
    $('#fileupload').fileupload({
    	autoUpload: false,
        url: url,
        dataType: 'json',
        singleFileUploads:false,
        uploadTemplateId:null,
        downloadTemplateId:null,
        maxFileSize : 209715200,
        uploadTemplate:function(data){
        	return $.tmpl(template,data);
        },
        done:function(e,data){
        	//data.jqXHR = null ;
        	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 === item;})){
            	//	datas.push(item);
            	//}
        		item.jqXHR = null;
        		$(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 === item;})){
        		datas.push(item);
        	}
    	});
    	
    	function concat(objs,propName){    		
    		var list = [];
    		//alert(propName);
    		objs.forEach(function(x){
    			list = list.concat(x[propName]);
    		});
    		return list;
    	}
    	
    	data.fileInputs = [data.fileInput];
    	["files","originalFiles","paramName","fileInputs"].forEach( function(x){    		
    		data[x] = concat(datas,x);
    	});
    	data.context = fileTrs;
    	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

ie 下上传文件，通过IFRAME ,需要修改 "jquery.iframe-transport.js" 这个文件，大概在 137 行的地方，修改成如下
  for(var ii=0;ii

另外，jquery file upload  基本是通过css 样式去绑定事件的，比如".start" ".files", ".cancel" 等都很重要，很多事件都是通过jquery选择样式，然后绑定的。另外，上传的文件对象都是绑定在  对象上面，这里涉及到了juqery.data ,缓存的使用。

我在这里提供一个 spring mvc  结合 jquery file upload 的例子，可以下载参考.



整个 file upload 的源代码 (juqery file upload source code free download,not include jar files)




sqring mvc jquery file upload.

	        
From：一号门