碼上快樂

相關內容    簡體    繁體

HTML5 jQuery+FormData 異步上傳文件，帶進度條

本文轉載自   查看原文   2016-10-25 09:48   4260    HTML5jQuery異步上傳文件帶進度條/ HTML5+jquery異步上傳/ 異步上傳文件帶進度條
  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>  
 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 多文件異步上傳帶進度條 HTML5 + AJAX ( jQuery版本 ) 文件上傳帶進度條 Jquery.form.js實現表單異步提交以及文件上傳（帶進度條） MVC3+Html5+jquery_easyui做上傳文件,帶進度條 HTML5利用FormData對象實現顯示進度條的文件上傳 帶進度條的文件上傳 帶進度條的文件上傳 Springboot 文件上傳(帶進度條) web文件上傳，帶進度條 贊！帶進度條的 jQuery 文件拖放上傳插件
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM