HTML5 jQuery+FormData 异步上传文件，带进度条

论坛 › 期权论坛 › 脚本     
匿名技术用户   2021-1-14 12:27   93   0

利用jQuery和HTML5的FormData异步上传文件的好处是：

  • 实现很简单
  • 很方便地支持进度条
  • 很方便地进行扩展和美化

先看看效果图：


图片上传后的结果：



实现步骤如下：

第一步：配置好SpringMVC + servlet3.0 文件上传所需要的各种资源，参考：http://blog.csdn.net/clementad/article/details/49533189


第二步：上传页面的html代码：

[html] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link href="../resources/css/common.css" rel="stylesheet" />
  6. <script src="../resources/js/jquery-2.1.4.js"></script>
  8. </head>
  10. <body>
  11. <h2>HTML5异步上传文件，带进度条</h2>
  12. <form method="post" enctype="multipart/form-data">
  13. 其他需要提交的信息：<input type="text" name="otherInfo"/><br/><br/>
  14. 选择要上传的文件：<br/>
  15. <input type="file" name="file" /><span></span><br/>
  16. <input type="file" name="file" /><span></span><br/>
  17. </form>
  19. <br/><br/>
  20. <input type="button" value="上传吧" onclick="upload()"/>
  21. <br/><br/>
  22. 上传进度：<progress></progress><br/>
  23. <p id="progress">0 bytes</p>
  24. <p id="info"></p>
  25. </body>
  26. </html>
[html] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <link href="../resources/css/common.css" rel="stylesheet" />  
  6.     <script src="../resources/js/jquery-2.1.4.js"></script>  
  7.       
  8. </head>  
  9.   
  10. <body>  
  11.     <h2>HTML5异步上传文件，带进度条</h2>  
  12.     <form method="post" enctype="multipart/form-data">  
  13.         其他需要提交的信息：<input type="text" name="otherInfo"/><br/><br/>  
  14.         选择要上传的文件：<br/>  
  15.         <input type="file" name="file" /><span></span><br/>  
  16.         <input type="file" name="file" /><span></span><br/>  
  17.     </form>  
  18.       
  19.     <br/><br/>  
  20.     <input type="button" value="上传吧" onclick="upload()"/>  
  21.     <br/><br/>  
  22.     上传进度：<progress></progress><br/>  
  23.     <p id="progress">0 bytes</p>  
  24.     <p id="info"></p>  
  25. </body>  
  26. </html>  


第三步：异步上传的JavaScript代码（注释很详细）：

[javascript] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. <script>
  2. var totalSize = 0;
  4. //绑定所有type=file的元素的onchange事件的处理函数
  5. $(':file').change(function() {
  6. var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了
  7. name = file.name;
  8. size = file.size;
  9. type = file.type;
  10. url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片
  12. $(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url);
  14. totalSize += size;
  16. $("#info").html("总大小: " + totalSize + "bytes");
  18. });
  20. function upload() {
  21. //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");
  22. var formData = new FormData($('form')[0]);
  24. //ajax异步上传
  25. $.ajax({
  26. url: "http://localhost:8080/MyJavaStudio/servlet/file/upload",
  27. type: "POST",
  28. data: formData,
  29. xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
  31. myXhr = $.ajaxSettings.xhr();
  32. if(myXhr.upload){ //检查upload属性是否存在
  33. //绑定progress事件的回调函数
  34. myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
  35. }
  36. return myXhr; //xhr对象返回给jQuery使用
  37. },
  38. success: function(result){
  39. $("#result").html(result.data);
  40. },
  41. contentType: false, //必须false才会自动加上正确的Content-Type
  42. processData: false //必须false才会避开jQuery对 formdata 的默认处理
  43. });
  44. }
  46. //上传进度回调函数：
  47. function progressHandlingFunction(e) {
  48. if (e.lengthComputable) {
  49. $('progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条
  50. var percent = e.loaded/e.total*100;
  51. $('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
  52. }
  53. }
  54. </script>
[javascript] view plain copy
 print?
  1. <script>  
  2.     var totalSize = 0;  
  3.       
  4.     //绑定所有type=file的元素的onchange事件的处理函数  
  5.     $(':file').change(function() {  
  6.         var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了  
  7.         name = file.name;  
  8.         size = file.size;  
  9.         type = file.type;  
  10.         url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片  
  11.           
  12.         $(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url);  
  13.           
  14.         totalSize += size;  
  15.           
  16.         $("#info").html("总大小: " + totalSize + "bytes");  
  17.           
  18.     });  
  19.   
  20.     function upload() {  
  21.         //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");  
  22.         var formData = new FormData($('form')[0]);  
  23.           
  24.         //ajax异步上传  
  25.         $.ajax({  
  26.             url: "http://localhost:8080/MyJavaStudio/servlet/file/upload",  
  27.             type: "POST",  
  28.             data: formData,  
  29.             xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数  
  30.               
  31.                 myXhr = $.ajaxSettings.xhr();  
  32.                 if(myXhr.upload){ //检查upload属性是否存在  
  33.                     //绑定progress事件的回调函数  
  34.                     myXhr.upload.addEventListener('progress',progressHandlingFunction, false);   
  35.                 }  
  36.                 return myXhr; //xhr对象返回给jQuery使用  
  37.             },  
  38.             success: function(result){  
  39.                 $("#result").html(result.data);  
  40.             },  
  41.             contentType: false, //必须false才会自动加上正确的Content-Type  
  42.             processData: false  //必须false才会避开jQuery对 formdata 的默认处理  
  43.         });  
  44.     }         
  45.   
  46.     //上传进度回调函数：  
  47.     function progressHandlingFunction(e) {  
  48.         if (e.lengthComputable) {  
  49.             $('progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条  
  50.             var percent = e.loaded/e.total*100;  
  51.             $('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");  
  52.         }  
  53.     }  
  54. </script>  

第四步：SpringMVC写好接受和保持文件的Controller方法：

[java] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  1. /**
  2. * 文件上传
  3. * @author XuJijun
  4. *
  5. */
  6. @RestController
  7. @RequestMapping("/servlet/file")
  8. public class FileUploadController {
  10. /**
  11. * 保存文件的目录，放在web目录、或一个指定的绝对目录下
  12. */
  13. private static final String SAVE_DIR = "uploadFiles";
  15. /**
  16. *
  17. * @param request
  18. * @param response
  19. * @param p form表单中，type="text"的input控件，内容通过这个参数传送过来，以input控件中的name属性来区分
  20. * @return JSON表示的处理结果
  21. * @throws ServletException
  22. * @throws IOException
  23. */
  24. @RequestMapping("/upload")
  25. public JsonResult upload(HttpServletRequest request, HttpServletResponse response, @RequestParam Map<String, Object> p)
  26. throws ServletException, IOException {
  28. // 获取 web application的绝对路径
  29. String appPath = request.getServletContext().getRealPath("");
  31. // 构造文件存放的路径
  32. String savePath = appPath + File.separator + SAVE_DIR;
  34. // 如果文件存放路径不存在，则mkdir一个
  35. File fileSaveDir = new File(savePath);
  36. if (!fileSaveDir.exists()) {
  37. fileSaveDir.mkdirs();
  38. }
  40. List<String> fileNames = new ArrayList<>();
  42. //循环所有的part，把part中的文件保存到硬盘中
  43. for (Part part : request.getParts()) {
  44. String fileName = part.getSubmittedFileName();
  46. //form表单中的每个input，都在一个不同的part中，
  47. //所以需要判断通过fileName是否为空，过滤掉其他类型的input（比如type="text"）：
  48. if(!StringUtils.isEmpty(fileName)){
  49. part.write(savePath + File.separator + fileName);
  50. fileNames.add(fileName);
  51. }
  52. }
  54. Map<String, Object> resultData = new HashMap<>();
  55. resultData.put("savePath", savePath);
  56. resultData.put("files", fileNames);
  58. return new JsonResult("200", "文件上传成功！", resultData);
  59. }
  61. /**
  62. * 从content-disposition头中获取源文件名
  63. *
  64. * content-disposition头的格式如下：
  65. * form-data; name="dataFile"; filename="PHOTO.JPG"
  66. *
  67. * @param part
  68. * @return
  69. */
  70. @SuppressWarnings("unused")
  71. private String extractFileName(Part part) {
  72. String contentDisp = part.getHeader("content-disposition");
  73. String[] items = contentDisp.split(";");
  74. for (String s : items) {
  75. if (s.trim().startsWith("filename")) {
  76. return s.substring(s.indexOf("=") + 2, s.length()-1);
  77. }
  78. }
  79. return "";
  80. }
  82. }
[java] view plain copy
 print?
  1. /** 
  2.  * 文件上传 
  3.  * @author XuJijun 
  4.  * 
  5.  */  
  6. @RestController  
  7. @RequestMapping("/servlet/file")  
  8. public class FileUploadController {  
  9.       
  10.     /** 
  11.      * 保存文件的目录，放在web目录、或一个指定的绝对目录下 
  12.      */  
  13.      private static final String SAVE_DIR = "uploadFiles";  
  14.       
  15.      /** 
  16.       *  
  17.       * @param request 
  18.       * @param response 
  19.       * @param p form表单中，type="text"的input控件，内容通过这个参数传送过来，以input控件中的name属性来区分 
  20.       * @return JSON表示的处理结果 
  21.       * @throws ServletException 
  22.       * @throws IOException 
  23.       */  
  24.     @RequestMapping("/upload")  
  25.     public JsonResult upload(HttpServletRequest request, HttpServletResponse response, @RequestParam Map<String, Object> p)  
  26.             throws ServletException, IOException {  
  27.   
  28.         // 获取 web application的绝对路径  
  29.         String appPath = request.getServletContext().getRealPath("");  
  30.           
  31.         // 构造文件存放的路径  
  32.         String savePath = appPath + File.separator + SAVE_DIR;  
  33.   
  34.         // 如果文件存放路径不存在，则mkdir一个  
  35.         File fileSaveDir = new File(savePath);  
  36.         if (!fileSaveDir.exists()) {  
  37.             fileSaveDir.mkdirs();  
  38.         }  
  39.   
  40.         List<String> fileNames = new ArrayList<>();  
  41.           
  42.         //循环所有的part，把part中的文件保存到硬盘中  
  43.         for (Part part : request.getParts()) {  
  44.             String fileName = part.getSubmittedFileName();  
  45.               
  46.             //form表单中的每个input，都在一个不同的part中，  
  47.             //所以需要判断通过fileName是否为空，过滤掉其他类型的input（比如type="text"）：  
  48.             if(!StringUtils.isEmpty(fileName)){   
  49.                 part.write(savePath + File.separator + fileName);  
  50.                 fileNames.add(fileName);  
  51.             }  
  52.         }  
  53.   
  54.         Map<String, Object> resultData = new HashMap<>();  
  55.         resultData.put("savePath", savePath);  
  56.         resultData.put("files", fileNames);  
  57.           
  58.         return new JsonResult("200", "文件上传成功！", resultData);  
  59.     }  
  60.        
  61.     /** 
  62.      * 从content-disposition头中获取源文件名 
  63.      *  
  64.      * content-disposition头的格式如下： 
  65.      * form-data; name="dataFile"; filename="PHOTO.JPG" 
  66.      *  
  67.      * @param part 
  68.      * @return 
  69.      */  
  70.     @SuppressWarnings("unused")  
  71.     private String extractFileName(Part part) {  
  72.         String contentDisp = part.getHeader("content-disposition");  
  73.         String[] items = contentDisp.split(";");  
  74.         for (String s : items) {  
  75.             if (s.trim().startsWith("filename")) {  
  76.                 return s.substring(s.indexOf("=") + 2, s.length()-1);  
  77.             }  
  78.         }  
  79.         return "";  
  80.     }  
  81.   
  82. }  

最后那个私有方法可以不用的，只是为了演示如何直接获取request header中的数据。


最后，验证上传过程中的网络消息：

上传的消息头和数据：


可见，对于表单中的3个input，http request payload中对应有3个part来上传数据。

Controller处理后的返回结果（JSON格式）：


总结：代码很简单，结果很友好,html5和SpringMVC！


回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

16级独孤
匿名技术用户

积分:7942463
帖子:1588486
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP