以前學的是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);
}
}
}
運行項目結果：
