AJAX 文件上传进度条 JAVA

=======JSP文件

html 复制代码
<%@ 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);
		}
	}

}
相关推荐
异常君1 分钟前
MySQL重复数据克星:7种高效处理方案全解析
java·后端·mysql
异常君4 分钟前
Spring 定时任务执行一次后不再触发?5 大原因与解决方案全解析
java·后端·spring
异常君7 分钟前
Java 序列化工具:@JSONField 注解实战解析与应用技巧
java·后端·json
写bug写bug40 分钟前
Java并发编程:什么是线程组?它有什么作用?
java·后端
Andya_net1 小时前
SpringBoot | 构建客户树及其关联关系的设计思路和实践Demo
java·spring boot·后端
申城异乡人1 小时前
【踩坑系列】使用Comparator.comparing对中文字符串排序结果不对
java
Brian_Lucky1 小时前
在 macOS 上合并 IntelliJ IDEA 的项目窗口
java·macos·intellij-idea
周杰伦_Jay1 小时前
continue插件实现IDEA接入本地离线部署的deepseek等大模型
java·数据结构·ide·人工智能·算法·数据挖掘·intellij-idea
江沉晚呤时1 小时前
深入了解递归、堆与栈:C#中的内存管理与函数调用
java·jvm·算法