Question

javaWEB项目中如何实现批量选择文件并上传呢？有什么好的插件，最好有相关代码例子

Answer 1

jquery.uploadify批量上传控件
[html] 
<link href="styles/uploadify.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="styles/uploadify.swf"></script> 
<script type="text/javascript" src="javascripts/jquery.uploadify.min.js"></script>  
<link href="styles/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="styles/uploadify.swf"></script>
<script type="text/javascript" src="javascripts/jquery.uploadify.min.js"></script> 还有jquery.js,你懂得!
这里注意哦,css文件会引用到这个图片哦,所以请你指定这个图片的位置哦,不然就没有显示这个叉叉哦,这个叉叉是删除按钮的哦,没有就是空白哦!


[javascript]
<script> 
function snedUpLoad(){ 
    var pid = $("#entityId").val();                //这个是我自己获取的自定义参数  
    var entityName = $("#entityName").val();       //同上  
    $("#uploadify").uploadify({                    //初始化uploadify  uploadify是input的id  
        //'debug' : false,                             //dubug模式 ,默认是false  
        'auto':false,                                  //自动上传,就是控件自动上传,默认是true  
        'multi':true, 
        //'successTimeout':99999,                      //超时时间  
        'formData':{'pid':pid,'entityName':entityName },//我的参数列表  
        //'fileObjName':'uploadify',                   //服务器的属性名字  
        
'uploader':'你的后台url地址;jsessionid=${pageContext.session.id}',//提交服务器路径,这里
说明下;jsessionid=${pageContext.session.id},这个是用于非IE内核的浏览器兼容的  
        'swf':"styles/uploadify.swf",                  //flash文件,官方的文件,引用上就是了  
        //'uploader': '/Home/Upload',                  //文件保存路径   用处不大  
        'buttonText': '文件上传',           //按钮  
        //'height':'32',                //浏览按钮的高度     
        //'width':'100',                               //浏览按钮的宽度  
        'fileTypeDesc':'支持的格式：',                 //在浏览窗口底部的文件类型下拉菜单中显示的文本  
        'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',     //允许上传的文件后缀  
        'fileSizeLimit':'3MB',                         //上传文件的大小限制  
        'queueSizeLimit' : 25,                         //上传数量  
        'onSelectError':function(file, errorCode, errorMsg){  //返回一个错误，选择文件的时候触发  
           switch(errorCode) { 
               case -100: 
                   alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！"); 
                   break; 
               case -110: 
                   alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！"); 
                   break; 
               case -120: 
                   alert("文件 ["+file.name+"] 大小异常！"); 
                   break; 
               case -130: 
                   alert("文件 ["+file.name+"] 类型不正确！"); 
                   break; 
           } 
        }, 
        'onFallback':function(){             //检测FLASH失败调用  
            alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。"); 
        }, 
        'onUploadSuccess':function(file, data, response){  //上传到服务器，服务器返回相应信息到data里  
            if(data){ 
                var dataObj=eval("("+data+")");//转换为json对象   
                //$('#uploadify').uploadify('upload')  
            } 
        } 
    }); 
} 
</script> 
<script>
function snedUpLoad(){
 var pid = $("#entityId").val();                //这个是我自己获取的自定义参数
 var entityName = $("#entityName").val();       //同上
 $("#uploadify").uploadify({                    //初始化uploadify  uploadify是input的id
        //'debug' : false,                             //dubug模式 ,默认是false
        'auto':false,                                  //自动上传,就是控件自动上传,默认是true
        'multi':true,
        //'successTimeout':99999,                      //超时时间
        'formData':{'pid':pid,'entityName':entityName },//我的参数列表
        //'fileObjName':'uploadify',                   //服务器的属性名字
        
'uploader':'你的后台url地址;jsessionid=${pageContext.session.id}',//提交服务器路径,这里
说明下;jsessionid=${pageContext.session.id},这个是用于非IE内核的浏览器兼容的
        'swf':"styles/uploadify.swf",                  //flash文件,官方的文件,引用上就是了
        //'uploader': '/Home/Upload',                  //文件保存路径   用处不大
        'buttonText': '文件上传',   //按钮
        //'height':'32',    //浏览按钮的高度 
       //'width':'100',                               //浏览按钮的宽度
       'fileTypeDesc':'支持的格式：',                 //在浏览窗口底部的文件类型下拉菜单中显示的文本
        'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',     //允许上传的文件后缀
        'fileSizeLimit':'3MB',                         //上传文件的大小限制
        'queueSizeLimit' : 25,                         //上传数量
        'onSelectError':function(file, errorCode, errorMsg){  //返回一个错误，选择文件的时候触发
           switch(errorCode) {
               case -100:
                   alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
                   break;
               case -110:
                   alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
                   break;
               case -120:
                   alert("文件 ["+file.name+"] 大小异常！");
                   break;
               case -130:
                   alert("文件 ["+file.name+"] 类型不正确！");
                   break;
           }
        },
        'onFallback':function(){             //检测FLASH失败调用
            alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
        },
        'onUploadSuccess':function(file, data, response){  //上传到服务器，服务器返回相应信息到data里
         if(data){
          var dataObj=eval("("+data+")");//转换为json对象
    //$('#uploadify').uploadify('upload')
         }
        }
    });
}
</script>
 
[javascript]
$(function(){ 
    snedUpLoad();    //jquery容器加载完运行我们的函数  
}) 
$(function(){
    snedUpLoad();    //jquery容器加载完运行我们的函数
})
 
 
[html]
<input type="file" name="uploadify" id="uploadify" />  //申明控件的容器 
<input type="file" name="uploadify" id="uploadify" />  //申明控件的容器
前台页面代码基本就这样了,很好明白,至于后台逻辑和普通上传处理一致的,这里就不列出来的,最后上一张图给大家鉴赏一下
(tip:其实他的批量上传并不是一次全部提交处理的,他是一个一个依次提交,相当是一个for循环,所以后台处理的同时只是一个文件上传,即排序的处理上传文件,就和单个文件上传的代码一样,如果你早有后台的单文件上传代码就不用改,直接调用就行了,可以共用)