=======JSP文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>AJAX 文件上传进度条</title><style>#smallrainContainer {width: 300px;border: 1px solid red ;margin-top: 10px;}#smallrainBar {height: 20px;background-color: blue;width: 0%;}</style>
</head>
<body>
<h3>AJAX 文件上传进度条</h3><h3>请选择较大的文件进度条才看的清楚</h3><input type="file" id="smallrainInput" name="smallrainInput"><div id="smallrainContainer"><div id="smallrainBar"></div></div><button onclick="uploadFile()">上传文件</button><script>function uploadFile() {const fileInput = document.getElementById('smallrainInput');const file = fileInput.files[0];if (!file) {alert('请选择要上传的文件');return;}const formData = new FormData();formData.append('smallrainfileInput', file);const xhr = new XMLHttpRequest();xhr.open('POST', 'smallRainAJAXUpload', true);xhr.upload.addEventListener('progress', function (event) {if (event.lengthComputable) {const percentComplete = (event.loaded / event.total) * 100;const progressBar = document.getElementById('smallrainBar');progressBar.style.width = percentComplete + '%';}});xhr.onload = function () {if (xhr.status === 200) {alert('文件上传成功');} else {alert('文件上传失败');}};xhr.send(formData);}</script>
</body></html>======JAVA文件
java">package org.rain.ajax;import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;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;@WebServlet("/smallRainAJAXUpload")
@MultipartConfig()
public class MulAJAXUpload extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();String shead = new String("<head> <meta http-equiv=\"content-type\" content=\"text/html;charset=utf-8\"> </head>");out.println("<html>");out.print(shead);out.println("您访问的路径不存在，非法访问");out.println("</body>");out.println("</html>");}protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String savePath = "C:/SmallRian";boolean hasFile = false;try {File fileSaveDir = new File(savePath);if (!fileSaveDir.exists()) {fileSaveDir.mkdir();}Part filePart = request.getPart("smallrainfileInput");String fileName = filePart.getSubmittedFileName();String localFile = savePath + "/" + fileName;if (null != fileName && fileName.length() > 0 && filePart.getSize() > 0) {filePart.write(localFile);hasFile = true;} else {hasFile = false;}} catch (IOException e) {response.sendError(500);throw new ServletException("没有上传成功", e);}}}
