AJAX文件上传进度条JAVA

人工智能
2025-09-19 01:18:02

=======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文件

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); } } }

标签：

AJAX文件上传进度条JAVA由讯客互联人工智能栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“AJAX文件上传进度条JAVA”

上一篇
物联网智慧水库管理系统中集成无人机巡逻和隔空喊话

下一篇
idea显示.java文件不能运行解决方式