使用js原生方法和JQuery中ajax方法一次性上传多个文件

JavaScript原生方法实现。

html片段

<input type="file" name="file" id="FileUpload" multiple >   //支持多文件选择上传
<input type="button" value="上传" id="sub">

js 代码:

//核心代码.第一个参数上FormData对象。第二个是上传文件表单对象。
 function CreateFileName(upLoadFile,obj){
        var L=obj.files.length;
        for(let i=0;i<L;i++){
            upLoadFile.append("File",obj.files[i]);   // 这里的 "File" 需要和服务端的接收参数一致。不然会报错。
        }
        return upLoadFile;
    }
    var UpfileObj=document.getElementById("FileUpload");
    document.getElementById("sub").onclick=function () {  
	        var FileLIst = CreateFileName(new FormData(),UpfileObj );  // 获取需要发送的数据。
	        document.getElementById("FileUpload").value = "";   	// 点击上传后清空表单的值。
	           var xhr = new XMLHttpRequest();          
	           xhr.open("POST", "http://localhost:8080/Ajax/upLoadFile"); // 向指定url发送POST请求。
	           xhr.setRequestHeader("processData","false");        //这里不能设置Content-Type。否则会报错。
	           xhr.onload = function () {    			 //接收响应完成回调函数。
         		  if(this.status===200){			    
                		console.log(this.responseText);     //打印响应文本       		
            }
        };
           xhr.send(FileLIst);              //发送数据给服务端
     };

服务端代码:

	@RequestMapping(value = "/upLoadFile", produces={"application/json"} )
	@ResponseBody
	public JSONObject AcceptFile(@RequestParam(value = "File", required = true) MultipartFile [ ] fileList,
			HttpServletResponse response, HttpServletRequest request) {
			
		String fileName;
		JSONObject JS = new JSONObject();
		JS.put("STATUS", "200 OK!");
		// 遍历执行
		for (int i = 0; i < fileList.length; i++) {
			fileName = fileList[i].getOriginalFilename();     //获取文件原始名称。
			if (fileName.indexOf("\\") != -1) {
				fileName = fileName.substring(fileName.lastIndexOf("\\")); //获取不带路径信息的文件名。
			}
			// 获取文件存放地址
			String filePath = "F:/JAVA_FILE/";   		//自定义存储路径
			File f = new File(filePath);
			if (!f.exists()) {
				f.mkdirs(); 	// 不存在路径则进行创建
			}
			FileOutputStream out = null;  
			try {
				// 重新自定义文件的名称
				Date date = new Date();
				SimpleDateFormat sdf = new SimpleDateFormat("yyyy_MMdd_HH_mm_ss");
				String d = sdf.format(date); // 时间
				filePath = filePath + d +"_"+ fileName;   //新的文件全路径信息。
				out = new FileOutputStream(filePath);
				out.write(fileList[i].getBytes());    // 以字节的形式将文件写入。
				out.flush();                              //这个没有任何作用。flush在BufferOutputStrem有效。
				if (i == fileList.length - 1) {
					out.close();         			 // 最后一个文件了,关闭输出流
				}

			} catch (Exception e) {
				JS.put("STATUS", "303  上传失败！");
				break;
			}
		}

		return JS;

	}

ajax实现

html和服务端代码都是一样的。就是js代码有点不一样而已。

 //核心代码.第一个参数上FormData对象。第二个是上传文件表单对象。
 function CreateFileName(upLoadFile,obj){
        var L=obj.files.length;
        for(let i=0;i<L;i++){
            upLoadFile.append("File",obj.files[i]);   // 这里的 "File" 需要和服务端的接收参数一致。不然会报错。
        }
        return upLoadFile;
 }

   $("#sub").on("click",function () {
          var FileLIst= CreateFileName(new FormData(),$("#FileUpload")[0]);  
            document.getElementById("FileUpload").value="";   //清空表单内容
             // 发送ajax请求。
          $.ajax({
                url:"http://localhost:8080/Ajax/upLoadFile",
                type:"POST",
                data: FileLIst,
                contentType:false,
                processData:false.
                success:function (res) {
                   console.log(res);
                },
                error:function (xhr) {
                    console.log(xhr);
                }
            });
      });

现在有很多方法可以实现文件的上传,我这里只介绍了使用FormData来进行文件的上传。比如 $.ajaxSubmit   $.ajaxForm $.ajaxUploadFile ，不过使用的时候需要导入相应的js文件。