以前学的是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);
}
}
}
运行项目结果：
