JAVAWEB在线上传无刷新进度条显示资源-CSDN下载

共21个文件

class：4个

java：4个

jar：2个

需积分: 50 78 浏览量 2016-01-21 16:24:24 上传评论收藏 279KB ZIP 举报

在Java Web开发中，实现在线文件上传并展示无刷新进度条是一项常见的需求，它能显著提升用户体验。这一技术主要依赖于AJAX（异步JavaScript和XML）和Web服务器端的技术支持，如Servlet、Spring MVC或者Struts等。下面将详细阐述实现这个功能的关键知识点。 1. **文件上传组件**：在前端，可以使用HTML5的`<input type="file">`标签配合jQuery的File API来选择和读取文件。例如，使用`FormData`对象将文件数据封装，以便通过AJAX发送到服务器。 2. **AJAX异步上传**：通过jQuery或者其他JavaScript库，如axios或fetch API，创建异步请求。使用`XMLHttpRequest`或`fetch`发送POST请求，将文件数据和额外的表单字段作为FormData发送到后台。 3. **进度条显示**：在发送文件过程中，`XMLHttpRequest`的`onprogress`事件可以监听到上传进度，更新进度条的值。例如，通过计算已上传字节数与总字节数的比例，动态更新HTML元素的宽度来展示进度。 4. **服务器处理**：在后台，如使用Servlet，你需要重写`doPost`方法来接收文件。Servlet 3.0及以上版本可以直接通过`Part`接口处理文件。接收到文件后，将其保存到服务器的指定位置，并返回响应信息，如进度或成功/失败状态。 5. **响应处理**：前端接收到服务器的响应后，根据返回的状态更新界面。如果服务器返回了新的进度，更新进度条；如果是上传成功，可以显示成功消息或清空文件输入框，准备下一次上传。 6. **安全性考虑**：在处理文件上传时，必须考虑到安全性问题。例如，限制文件类型和大小，防止DoS攻击；对上传的文件名进行安全处理，避免路径遍历漏洞；确保服务器有足够的存储空间，以及合理的文件清理策略。 7. **用户体验优化**：为了提供更好的用户体验，可以使用模态框或者加载层来显示上传过程，避免用户操作其他部分的界面。还可以添加取消上传的功能，通过中断AJAX请求实现。 8. **性能优化**：对于大文件上传，可以考虑使用分块上传，将大文件拆分成多个小块，逐个上传，每上传一个块就更新一次进度。 9. **错误处理**：无论是前端还是后端，都需要对可能出现的错误进行处理，如网络中断、文件读取错误等，确保程序的健壮性。通过上述技术，我们可以构建出一个用户友好的Java Web在线文件上传系统，它能在无刷新的情况下实时显示上传进度，提高用户交互体验。同时，确保安全性、稳定性和性能是实现此功能时不可或缺的关注点。

资源推荐

资源详情

资源评论

收起资源包目录

上传.zip （21个子文件）

Java文件上传

Upload

.project 1KB

.mymetadata 291B

src

com

hongfei

lister

UploadLister.java 506B

entity

Upload.java 632B

servlet

AjaxServlet.java 3KB

Upload.java 5KB

WebRoot

WEB-INF

classes

com

hongfei

lister

UploadLister.class 734B

entity

Upload.class 959B

servlet

AjaxServlet.class 3KB

Upload.class 4KB

lib

commons-io-2.0.1.jar 156KB

commons-fileupload-1.2.2.jar 58KB

web.xml 938B

upload

upload.jsp 2KB

jquery-1.7.1.js 242KB

META-INF

MANIFEST.MF 36B

.myeclipse

.settings

org.eclipse.wst.jsdt.ui.superType.container 49B

org.eclipse.jdt.core.prefs 330B

org.eclipse.wst.jsdt.ui.superType.name 6B

.jsdtscope 500B

.classpath 391B

package com.hongfei.servlet; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.PrintWriter; import java.util.Iterator; import java.util.List; import javax.servlet.ServletException; 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.hongfei.lister.UploadLister; @SuppressWarnings("serial") public class Upload extends HttpServlet { /** * Constructor of the object. */ public Upload() { super(); } /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out .println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">"); out.println("<HTML>"); out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>"); out.println(" <BODY>"); out.print(" This is "); out.print(this.getClass()); out.println(", using the GET method"); out.println(" </BODY>"); out.println("</HTML>"); out.flush(); out.close(); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ @SuppressWarnings({ "deprecation", "unchecked" }) public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); com.hongfei.entity.Upload upload = new com.hongfei.entity.Upload(); UploadLister lister = new UploadLister(upload); ServletFileUpload servletFileUpload = new ServletFileUpload(new DiskFileItemFactory()); //只是上传监听器 servletFileUpload.setProgressListener(lister); request.getSession().setAttribute("upload", upload); List list = null; try { list = servletFileUpload.parseRequest(request); } catch (FileUploadException e) { e.printStackTrace(); } for(Iterator iter = list.iterator(); iter.hasNext();){ //得到文件对象 FileItem fileItem = (FileItem)iter.next(); //是表单才进行处理 if(fileItem.isFormField()){ break; } //同意linux和windows的路径分隔符 String name = fileItem.getName().replaceAll("/", "\\"); //得到文件名 int index = name.lastIndexOf("\\"); String fileFileName = ""; if(index == -1){ fileFileName = name; }else{ fileFileName = name.substring(index + 1); } InputStream fileInputStream = fileItem.getInputStream(); String path = request.getRealPath("/upload"); //也可不用自己写实现方法直接使用,fileItem.write(uploadFile); File uploadFile = new File(path,fileFileName); //首先要确认路径是否存在 uploadFile.getParentFile().mkdirs(); //检查文件是否已经存在 if(!uploadFile.exists()){ //建立文件 uploadFile.createNewFile(); } FileOutputStream out2 = new FileOutputStream(uploadFile); //开始copy文件 @SuppressWarnings("unused") int len = 0;//每次读取的字节数 byte[] bytes = new byte[1024]; while((len = fileInputStream.read(bytes, 0, bytes.length)) != -1){ out2.write(bytes); } out2.flush(); out2.close(); fileInputStream.close(); } out.flush(); out.close(); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here } }

评论收藏

内容反馈