在html页面使用JavaScript实现文件上传到本地服务器并放回文件所在路径

以前学的是jsp页面，可是毕设项目是html页面，后台响应数据，html不可以直接获取响应数据。我使用jsp很容易后去，但是变成html页面之后，有点难了，应为不可以直接使用EL表达式，所以我就使用JavaScript用于接收后台传来的数据。

开讲：

首先创建一个项目：

导入所需的jar包：

写html页面：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
<style>
body{
 transition:1s;
}
#div1{
 width:100%;
 height:3px;
 position: relative;
 top:50px;
}
#num{
 position: absolute;
 width:100%;
 height: 3px;
 line-height: 3px;
 text-align: center;
 top:-1px;
 font-size: 30px;
}
#div2{
 width:0;
 height: 3px;
 background: #317EF3;
 transition: .2s;
 opacity:1;
}
</style>
</head>
<body>

 <input type="file" name="file" id="f" value="" />
 <input type="button" value="按钮" id="btn"/><br>
 <input type="text" id="span"></span>
<script type="text/javascript">
 /*
  当使用表单上传控件的时候，可以通过表单控件下的
  files[0],找到上传的文件资源。
  new FormData:
   FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对
   通过append方法把键值对放到FormData对象中，当send的时候直接传
   FormData对象即可。
   FormData.append('user','momo');
   FormData.append('pass','12345');
   ajax.send(FormData);  
 */
 
 
 const f = document.getElementById('f');
 const btn = document.getElementById('btn');
 const span = document.getElementById('span');
 console.dir(f)
 
 btn.onclick = function(){
  const ajax = new XMLHttpRequest;
  ajax.open('post','Upload2Servlet');
  //ajax.setRequestHeader('Content-Type','multipart/form-data');
  const ff = f.files[0];
  const formData = new FormData;
  formData.append('file',ff);
  ajax.send(formData);
  ajax.onload = function(){
   console.log(ajax.responseText)
   span.value = JSON.parse(ajax.responseText).msg;
   //result.innerHTML=document.getElementById("text1").value;
  }
  
 }

</script>
 
</body>
</html>

后台代码：


import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.fasterxml.jackson.databind.ObjectMapper;
@WebServlet("/Upload2Servlet")
public class Upload2Servlet extends HttpServlet {
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  request.setCharacterEncoding("utf-8");
  response.setContentType("text/html;charset=utf-8");

  Map<String,Object> map=new HashMap<String,Object>();
  DiskFileItemFactory factory = new DiskFileItemFactory();
  ServletFileUpload sfu = new ServletFileUpload(factory);
  try {
   List<FileItem> fileItemList = sfu.parseRequest(request);
   FileItem fi1 = fileItemList.get(0);
   
   String url=fi1.getName();
   String path="D:/video/"+url+"";
   File destFile = new File(path);
   fi1.write(destFile);
   map.put("msg",path);
   System.out.println(map.get("msg"));
   ObjectMapper mapper=new ObjectMapper();
   mapper.writeValue(response.getWriter(),map);
  } catch (FileUploadException e) {
   throw new RuntimeException(e);
  } catch (Exception e) {
   throw new RuntimeException(e);
  }
 }
}

运行项目结果：