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"} )@ResponseBodypublic 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文件。