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

  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. <script>  
  27. var totalSize = 0;  
  28. //绑定所有type=file的元素的onchange事件的处理函数  
  29.   $(':file').change(function() {  
  30.  var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了  
  31.         name = file.name;  
  32.         size = file.size;  
  33.         type = file.type;  
  34.         url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片  
  35.         $(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url);  
  36.         totalSize += size;  
  37.         $("#info").html("总大小: " + totalSize + "bytes");  
  38.     });  
  39. function upload() {  
  40. //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");  
  41. var formData = new FormData($('form')[0]);  
  42. //ajax异步上传  
  43.         $.ajax({  
  44.             url: "http://localhost:8080/MyJavaStudio/servlet/file/upload",  
  45.             type: "POST",  
  46.             data: formData,  
  47.             xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数  
  48.                 myXhr = $.ajaxSettings.xhr();  
  49.             if(myXhr.upload){ //检查upload属性是否存在  
  50.             //绑定progress事件的回调函数  
  51.                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false);   
  52.                 }  
  53.              return myXhr; //xhr对象返回给jQuery使用  
  54.             },  
  55.             success: function(result){  
  56.                 $("#result").html(result.data);  
  57.             },  
  58.             contentType: false, //必须false才会自动加上正确的Content-Type  
  59.             processData: false  //必须false才会避开jQuery对 formdata 的默认处理  
  60.         });  
  61.     }         
  62. //上传进度回调函数：  
  63. function progressHandlingFunction(e) {  
  64.     if (e.lengthComputable) {  
  65.             $('progress').attr({value : e.loaded, max : e.total}); //更新数据到进度条  
  66.             var percent = e.loaded/e.total*100;  
  67.             $('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");  
  68.         }  
  69.     }  
  70. </script>  
  71. </html>  
 

 

posted @ 2016-10-25 09:48  慶哥  阅读(4532)  评论(0)  编辑  收藏  举报