最适合中国国情的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<n;i++){
            if((i in this) && f.call(scope,this[i],i,this)){
                return true;
            }
        }
        return false;
    };
    Array.prototype.forEach = function(f,scope){
        for(var i=0,n=this.length;i<n;i++){
            (i in this) && f.call(scope,this[i],i,this);
        };
    };
};

$(function () {
    //列表项模板
    var template = '{{each files}}<tr class="template-upload fade in">'+
      
        '<td>'+
           ' <p class="name">${name}</p>  '+          
        '</td>'+
        '<td>'+
        '    <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>'+
        '</td>'+
        '<td>'+
        '    <button class="btn btn-primary start" style="display:none;">'+
        '       <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>'+
        '    </button>        '+    
        '</td>'+
    '</tr>{{/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<data.files.length;i++){
            if (data.files[i].name + (data.files[i].size?data.files[i].size:"") === fileNameAndSize){
                break;
            }
        }
        $(row).remove();
        ["files","originalFiles","paramName","fileInputs"].forEach(function(x){
            data[x].splice(i,1);
        });
        data.context = $(".template-upload");
        return false;
    };
    
/*    $('#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();
          return false;
        }
    });*/
    
});



ie 下上传文件,通过IFRAME ,需要修改 "jquery.iframe-transport.js" 这个文件,大概在 137 行的地方,修改成如下
程序代码 程序代码

  for(var ii=0;ii<options.fileInputs.length;ii++){
                                form.append(options.fileInputs[ii]);
                            }
                            // add end.
                            form
                                //disabled by customer
                                //.append(options.fileInput)
                                //end.
                                .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)








除非申明,文章均为一号门原创,转载请注明本文地址,谢谢!
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: jquery file upload spring
相关日志:
评论: 6 | 引用: 0 | 查看次数: -
回复回复12[2016-07-05 02:44 PM | del]
你好可以个我发一下这个源码吗?he1ya1r@163.com
回复回复天天[2015-08-08 04:37 PM | del]
不能注册,这个源码怎么下载呢?
回复回复1212121212[2015-06-12 03:07 PM | del]
想下载这个代码,没法注册,发送到我邮箱
570195314@qq.com
回复回复1[2014-12-01 11:50 AM | del]
你邮箱多少?asuncool@hotmail.com邮件发不了!
回复来自 yihaomen 的评论 yihaomen 于 2014-12-03 08:37 AM 回复
summer#yihaomen.com, 自己替换#号。
回复回复轻舞肥羊[2014-01-14 07:05 PM | del]
可以的,你再仔细测试下,IE下原来只能上传一个文件,修改后可以上传多个文件的。
回复回复大叔[2014-01-14 06:02 PM | del]
我发现我写的在ie下也上传不了。。。
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.