关于ajaxfileupload.js插件及其多上传的使用

关于ajaxfileupload.js插件的使用

众所周知，jsp中是无法使用ajax进行上传操作的，其实ajaxfileupload.js插件的使用也不过就是封装好的iframe，但是确实为我们的上传提供了很大的便利。

这里是ajaxfileupload插件的下载地址

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

代码块

原来未改动之前，例如：

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

改动之后，也就是我们给他添加了一个循环，让他支持了多上传

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); 
} 

下面我们讲解下ajaxfileupload的简单实用

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+")");
                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'/>

后台的接收

@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);
            String[] fileNames=fileName.split("\\.");//获取上传文件后缀
                String NfName=System.currentTimeMillis()+"."+fileNames[fileNames.length-1];//修改上传文件名称
                System.out.println(path);  
                File targetFile = new File(path, fileName);  
                if(!targetFile.exists()){  
                    targetFile.mkdirs();  
                }  

                //保存  
                try {  
                    m.transferTo(targetFile);  //拷贝上传的文件
                    System.out.println(request.getContextPath()+"/upload/"+fileName); //保存路径
                    model.addAttribute("filepath", request.getContextPath()+"/upload");
                } catch (Exception e) {  
                    e.printStackTrace();  
                }  
            }
        }



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

至此，简单的ajaxfileupload的多上传就完成了。