关于ajaxfileupload.js插件的使用

 

关于ajaxfileupload.js插件进行多上传的使用

ajaxfileupload.js的原生插件，只支持单上传，如果我们想要让他支持多上传，需要对插件的内部进行一个小小的改动。

原本的js插件

var oldElement = jQuery('#' + fileElementId); 
var newElement = jQuery(oldElement).clone(); 
jQuery(oldElement).attr('id', fileId); 
jQuery(oldElement).before(newElement); 
jQuery(oldElement).appendTo(form);

更改后的js插件

for(var i in fileElementId){ 
    var oldElement = jQuery('#' + fileElementId[i]); 
    var newElement = jQuery(oldElement).clone(); 
    jQuery(oldElement).attr('id', fileId); 
    jQuery(oldElement).before(newElement); 
    jQuery(oldElement).appendTo(form); 
} 

看的出来，我们只是增加了一个循环，但就是这个循环可以使原本的单上传变成多上传

下面我们来看jsp中的写法

    function   uploadMethod(){
        $.ajaxFileUpload({ 
            url : "<%=request.getContextPath()%>/user/uploadMethod.do", 
            secureuri : false, 
            //fileElementId:'uploadfile1',//原单上传使用方法 
            fileElementId :['uploadfile1','uploadfile2','uploadfile3','uploadfile4','uploadfile5'] //传入需要上传的多个file的id即可
            dataType : 'json', 
            success : function(data) {      
                var data1=eval("("+data+")"); 
     //返回自定义的json数据来判断是否上传成功

                if (data1.result == 0) {  
                    alert(data1.resultdata);
                } else { 
                    alert("上传失败！");
                } 
            } 

        });
    }

    <input type='file' name='uploadfile' id='uploadId1'/>
    <input type='file' name='uploadfile' id='uploadId2'/>
    <input type='file' name='uploadfile' id='uploadId3'/>
    <input type='file' name='uploadfile' id='uploadId4'/>
    <input type='file' name='uploadfile' id='uploadId5'/>

<button onclick="uploadMethod();"> 上传 </button>
                                    

 

下面我们来看后台数据的接收，我使用的是SpringMVC

@RequestMapping("/uploadMethod")
    @ResponseBody
    public String uploadFileMethod(@RequestParam(value="uploadfile",required=false,defaultValue="") MultipartFile[] uploadfile, HttpServletRequest request, Model model){
        //使用MultipartFile数组来接受多个被上传的文件
        String path = request.getSession().getServletContext().getRealPath("upload");  //我们先获取到upload文件夹的路径
        for(MultipartFile m:uploadfile){
            if(m!=null){
                String fileName = m.getOriginalFilename();  
                File file=new File(path);
            　　 if(! file.exists()){   　　　　　　//查看是否已经存在该文件夹，不存在则创建
                     file.mkdirs();  
                }  

                File targetFile = new File(path, fileName);  
               
                //保存  
                try {  
                    m.transferTo(targetFile);  //拷贝上传的文件
                    System.out.println(request.getContextPath()+"/upload/"+fileName); //保存路径

                } catch (Exception e) {  
                    e.printStackTrace();  
                }  
            }
        }

        return "{\"result\":0,\"resultdata\":\"上传成功\"}";//返回json格式的反馈信息                

 

ajaxfileupload.js的下载地址

至此，ajaxfileupload.js插件的多上传使用就完成了