servlet3.0之ajax檔案上傳和進度條
阿新 • • 發佈：2019-01-27
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css" /> </head> <body> <div class="container" style="padding:20px"> <!-- 進度條控制 --> <div class="progress"> <div id="progressDiv" class="progress-bar progress-bar-success progress-bar-striped active" style="min-width:2em;"> </div> </div> <!-- 表單開始 --> <form id="f" class="col-md-8" enctype="multipart/form-data"> <div class="input-group"> <input type="file" name="myfile"> </div> <button type="button" id="uploadBtn" class="btn btn-primary">上傳</button> </form> </div> <script> document.getElementById('uploadBtn').addEventListener('click', function(){ var xhr = new XMLHttpRequest(); xhr.open('post','UploadServlet'); //設定當請求狀態改變時觸發回撥 xhr.onreadystatechange=function(){ if(xhr.readyState == 4 && xhr.status==200){ console.info('上傳完成'); } } //設定上傳進度改變回調 xhr.upload.onprogress=function(pd){ //判斷是否可以獲取上傳進度(服務端是否已接收到請求) if(pd.lengthComputable){ //獲取當前上傳的 進度 var current = pd.loaded; //獲取總長度 var total = pd.total; //計算獲取當前進度 var progress = Math.round((current / total) *100)+'%'; //改變進度條 document.getElementById('progressDiv').style.width=progress; document.getElementById('progressDiv').innerHTML=progress; } } //將表單資料封裝到formData中 var formData = new FormData(document.getElementById('f')); //傳送資料 xhr.send(formData); }); </script> </body> </html> package com.softeem.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.MultipartConfig; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.Part; /** * Servlet implementation class UploadServlet */ @WebServlet("/UploadServlet") @MultipartConfig(location="d:\\tempFile" //fileSizeThreshold=1024*1024*2, //maxFileSize=1024*1024*2L, //maxRequestSize=1024*1024*1024*4L ) public class UploadServlet extends HttpServlet { private static final long serialVersionUID = 1L; public UploadServlet() { super(); // TODO Auto-generated constructor stub } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); Part part = request.getPart("myfile"); String fname = part.getSubmittedFileName(); part.write("d://目的/"+fname); } }