Java中使用Ajax、Jquery带进度条文件上传.资源-CSDN文库

共21个文件

java：4个

class：4个

jar：2个

Ajax

Jquery

文件上传

Java文件上传

5星 · 超过95%的资源需积分: 9 182 浏览量 2011-12-20 18:04:52 上传评论 14 收藏 269KB RAR 举报

在Java web开发中，实现一个带有进度条的文件上传功能是一项常见的需求，它能提供用户友好的交互体验。本文将详细讲解如何结合Ajax、jQuery和Java来实现这一功能。我们需要理解Ajax（Asynchronous JavaScript and XML）的核心是异步数据传输，它可以实现在不刷新整个页面的情况下与服务器进行数据交互。jQuery是一个JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。在文件上传中，我们将利用jQuery的Ajax方法来实现异步上传，同时配合一个进度条插件来展示上传进度。 1. **前端实现**： - 使用HTML创建一个表单，包含文件输入元素和一个进度条元素。例如： ```html <form id="uploadForm"> <input type="file" id="fileInput" /> <div id="progressBar"></div> <button type="button" id="uploadButton">上传</button> </form> ``` - 编写jQuery脚本，监听文件选择和上传按钮点击事件。当用户选择文件后，通过Ajax发起文件上传请求，并更新进度条。 ```javascript $('#uploadButton').on('click', function() { var formData = new FormData($('#uploadForm')[0]); $.ajax({ url: 'uploadFile', type: 'POST', data: formData, xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { var percentComplete = Math.round((e.loaded / e.total) * 100); $('#progressBar').css('width', percentComplete + '%'); } }); return xhr; }, contentType: false, processData: false }).done(function(response) { // 处理成功响应 }).fail(function(jqXHR, textStatus, errorThrown) { // 处理错误响应 }); }); ``` 2. **后端实现**： - 在Java环境中，我们可以使用Spring MVC或者Servlet API来处理文件上传。在`@PostMapping`的Controller方法中接收文件。 ```java @PostMapping("/uploadFile") public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) { // 验证文件大小、类型等 // 将文件保存到服务器，如：file.transferTo(new File("path/to/save/" + file.getOriginalFilename())); // 返回成功或失败信息 return ResponseEntity.ok("文件上传成功"); } ``` 3. **进度条插件**： - 为了美观地显示进度，可以选择使用Bootstrap Progress Bar或其他第三方进度条插件。例如，Bootstrap Progress Bar的HTML结构： ```html <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> ``` - 更新CSS样式`#progressBar`以适应进度条插件的要求。 4. **安全考虑**： - 为防止文件体积过大导致内存溢出，需要在前端和后端限制文件大小。 - 检查文件类型，防止恶意文件上传。 - 对文件名进行处理，避免路径遍历攻击。以上就是使用Ajax、jQuery和Java实现带进度条的文件上传功能的基本步骤。在实际开发中，你可能还需要处理更多细节，如错误处理、多文件上传、断点续传等。记得在项目中添加合适的测试用例，确保功能的稳定性和安全性。

资源推荐

资源详情

资源评论

收起资源包目录

Java中使用Ajax，Jquery带进度条文件上传.rar （21个子文件）

Upload

.settings

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

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

.jsdtscope 500B

org.eclipse.jdt.core.prefs 330B

src

com

hongfei

servlet

Upload.java 5KB

AjaxServlet.java 3KB

lister

UploadLister.java 506B

entity

Upload.java 632B

.project 1KB

WebRoot

upload

META-INF

MANIFEST.MF 36B

WEB-INF

web.xml 938B

classes

com

hongfei

servlet

Upload.class 4KB

AjaxServlet.class 3KB

lister

UploadLister.class 734B

entity

Upload.class 959B

lib

commons-io-2.0.1.jar 156KB

commons-fileupload-1.2.2.jar 58KB

jquery-1.7.1.js 242KB

upload.jsp 2KB

.mymetadata 291B

.classpath 528B

.myeclipse

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

评论收藏

内容反馈