ajax上传文件是怎么实现的
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax上传文件是怎么实现的相关的知识，希望对你有一定的参考价值。
参考技术A 我用javascript做了一个简单的文件上传，看能否对你有帮助。var xhr = new XMLHttpRequest();
xhr.addEventListener('progress', function()
console.log('progress');
, false);
xhr.addEventListener('load', function()
console.log('load');
, false);
xhr.open('post', '/upload', true);///upload为文件上传的接口
var fd = new FormData();
fd.append('upfile', photo.data.file);
fd.append('money', money);
fd.append('source', source);
fd.append('filename', photo.data.name);
xhr.send(fd);
jQuery方式好像有提供一个叫$.ajaxFileUpload的方式 上传可以google一下。本回答被提问者采纳
JavaWeb项目实现文件上传动态显示进度
很久没有更新博客了，这段时间实在的忙的不可开交，项目马上就要上线了，要修补的东西太多了。当我在学习JavaWeb文件上传的时候，我就一直有一个疑问，网站上那些博客的图片是怎么上传的，因为当提交了表单之后网页就跳转了。后来我学习到了Ajax，我知道了浏览器可以异步的发送响应，这时我又有新的疑问，那就是在我上传一些文件的时候，那些网站的上传进度是怎么做到的，因为servlet直到上传完成之后才完成响应。
最近我们的项目中有一个地方中需要用到一个功能，当用户点击一个处理按钮时，前台会实时的显示后台处理动态，由于servlet一次只能接受一个请求，而且在servlet的生命周期结束时才会把响应数据发送到前台（这一点大家可以做个这样的测试：
1 response.getWriter().print("hello"); 2 Thread.sleep(10000); 3 response.getWriter().print("world");
，你们会发现前台在等待了约10s后收到了"helloworld"）。所以我想到了一个方法：使用单例保存实时信息。具体的实现方法就是，当用户点击了处理按钮时，在后台开启一个线程进行处理，并且每进行到一步，就向单例中写入当前状态信息。然后编写一个servlet，用于返回单例中的信息，前台循环发送请求，这样就能实现实时显示进度的效果。
好了，啰嗦了这么多，下面进入正题，如何实现上传文件动态显示进度，其实思想和上面的功能是一致的，我将这个功能分为三个点：
- 单例：用于保存进度信息；
- 上传servlet：用于上传文件并实时写入进度；
- 进度servlet：用于读取实时进度信息；
上代码，前台：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <style type="text/css"> 7 #progress:after { 8 content: \'%\'; 9 } 10 </style> 11 </head> 12 <body> 13 <h3>File upload demo</h3> 14 <form action="TestServlet" method="post" enctype="multipart/form-data" id="dataForm"> 15 <input type="file" name="file" id="fileInput"> <br> 16 <input type="submit" value="submit" id="submit"> 17 </form> 18 <div id="progress"></div> 19 <script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script> 20 <script type="text/javascript"> 21 (function () { 22 var form = document.getElementById("dataForm"); 23 var progress = document.getElementById("progress"); 24 25 $("#submit").click(function(event) { 26 //阻止默认事件 27 event.preventDefault(); 28 //循环查看状态 29 var t = setInterval(function(){ 30 $.ajax({ 31 url: \'ProgressServlet\', 32 type: \'POST\', 33 dataType: \'text\', 34 data: { 35 filename: fileInput.files[0].name, 36 }, 37 success: function (responseText) { 38 var data = JSON.parse(responseText); 39 //前台更新进度 40 progress.innerText = parseInt((data.progress / data.size) * 100); 41 }, 42 error: function(){ 43 console.log("error"); 44 } 45 }); 46 }, 500); 47 //上传文件 48 $.ajax({ 49 url: \'UploadServlet\', 50 type: \'POST\', 51 dataType: \'text\', 52 data: new FormData(form), 53 processData: false, 54 contentType: false, 55 success: function (responseText) { 56 //上传完成，清除循环事件 57 clearInterval(t); 58 //将进度更新至100% 59 progress.innerText = 100; 60 }, 61 error: function(){ 62 console.log("error"); 63 } 64 }); 65 return false; 66 }); 67 })(); 68 </script> 69 </body> 70 </html>
后台，单例：
1 import java.util.Hashtable; 2 3 public class ProgressSingleton { 4 //为了防止多用户并发，使用线程安全的Hashtable 5 private static Hashtable<Object, Object> table = new Hashtable<>(); 6 7 public static void put(Object key, Object value){ 8 table.put(key, value); 9 } 10 11 public static Object get(Object key){ 12 return table.get(key); 13 } 14 15 public static Object remove(Object key){ 16 return table.remove(key); 17 } 18 }
上传servlet:
1 import java.io.File; 2 import java.io.FileOutputStream; 3 import java.io.IOException; 4 import java.io.InputStream; 5 import java.util.List; 6 7 import javax.servlet.ServletException; 8 import javax.servlet.annotation.WebServlet; 9 import javax.servlet.http.HttpServlet; 10 import javax.servlet.http.HttpServletRequest; 11 import javax.servlet.http.HttpServletResponse; 12 13 import org.apache.tomcat.util.http.fileupload.FileItem; 14 import org.apache.tomcat.util.http.fileupload.FileUploadException; 15 import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory; 16 import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload; 17 import org.apache.tomcat.util.http.fileupload.servlet.ServletRequestContext; 18 19 import singleton.ProgressSingleton; 20 21 @WebServlet("/UploadServlet") 22 public class UploadServlet extends HttpServlet { 23 private static final long serialVersionUID = 1L; 24 25 public UploadServlet() { 26 } 27 28 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 29 30 DiskFileItemFactory factory = new DiskFileItemFactory(); 31 factory.setSizeThreshold(4*1024); 32 33 ServletFileUpload upload = new ServletFileUpload(factory); 34 35 List<FileItem> fileItems; 36 try { 37 fileItems = upload.parseRequest(new ServletRequestContext(request)); 38 //获取文件域 39 FileItem fileItem = fileItems.get(0); 40 //使用sessionid + 文件名生成文件号 41 String id = request.getSession().getId() + fileItem.getName(); 42 //向单例哈希表写入文件长度和初始进度 43 ProgressSingleton.put(id + "Size", fileItem.getSize()); 44 //文件进度长度 45 long progress = 0; 46 //用流的方式读取文件，以便可以实时的获取进度 47 InputStream in = fileItem.getInputStream(); 48 File file = new File("D:/test"); 49 file.createNewFile(); 50 FileOutputStream out = new FileOutputStream(file); 51 byte[] buffer = new byte[1024]; 52 int readNumber = 0; 53 while((readNumber = in.read(buffer)) != -1){ 54 //每读取一次，更新一次进度大小 55 progress = progress + readNumber; 56 //向单例哈希表写入进度 57 ProgressSingleton.put(id + "Progress", progress); 58 out.write(buffer); 59 } 60 //当文件上传完成之后，从单例中移除此次上传的状态信息 61 ProgressSingleton.remove(id + "Size"); 62 ProgressSingleton.remove(id + "Progress"); 63 in.close(); 64 out.close(); 65 } catch (FileUploadException e) { 66 e.printStackTrace(); 67 } 68 69 response.getWriter().print("done"); 70 } 71 72 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 73 doGet(request, response); 74 } 75 76 }
进度servlet：
1 import java.io.IOException; 2 3 import javax.servlet.ServletException; 4 import javax.servlet.annotation.WebServlet; 5 import javax.servlet.http.HttpServlet; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8 9 import net.sf.json.JSONObject; 10 import singleton.ProgressSingleton; 11 12 @WebServlet("/ProgressServlet") 13 public class ProgressServlet extends HttpServlet { 14 private static final long serialVersionUID = 1L; 15 16 public ProgressServlet() { 17 super(); 18 // TODO Auto-generated constructor stub 19 } 20 21 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 22 23 String id = request.getSession().getId(); 24 String filename = request.getParameter("filename"); 25 //使用sessionid + 文件名生成文件号，与上传的文件保持一致 26 id = id + filename; 27 Object size = ProgressSingleton.get(id + "Size"); 28 size = size == null ? 100 : size; 29 Object progress = ProgressSingleton.get(id + "Progress"); 30 progress = progress == null ? 0 : progress; 31 JSONObject json = new JSONObject(); 32 json.put("size", size); 33 json.put("progress", progress); 34 response.getWriter().print(json.toString()); 35 } 36 37 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 38 doGet(request, response); 39 } 40 41 }
效果图：
以上是关于ajax上传文件是怎么实现的的主要内容，如果未能解决你的问题，请参考以下文章
我用WebService 上传文件 想用ajax方法发送提交的文件请求 能做到吗？？
multipartfile 文件上传前端怎么用div和ajax