基於HTML5 Ajax實現檔案上傳並顯示進度條_AJAX相關

來源:互聯網
上載者:User

本文執行個體講解了ajax上傳檔案及進度條的實現方法,分享給大家供大家參考,具體內容如下

效果圖:

html5上傳是同步上傳的方式,所以能夠實現進度條的顯示。
1.上傳檔案:

首先我們用ajax來取得<input type="file" id="file_upload">的file對象:

var file = null; var input = $("#file_upload"); //檔案域選擇檔案時, 執行readFile函數 input.addEventListener('change',readFile,false); function readFile(){  file = this.files[0]; } 

 然後用FormData()送到後台。

 var fd = new FormData(); fd.append("file", file); 

 2.監聽事件:給XMLHttpRequest添加上傳中的監聽事件,可以得到已上傳的檔案大小,用以實現進度條的顯示。

 //監聽事件 hr.upload.addEventListener("progress", uploadProgress, false); 

完整代碼如下:

<html> <head> <meta charset="utf-8"> <title>進度條測試</title> <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script> </head> <body>   <input type="file" id="file_upload"/>  <input type="button" value="上傳" id="upload"/>  <div style="background:#848484;width:100px;height:10px;margin-top:5px">  <div id="progressNumber" style="background:#428bca;width:0px;height:10px" >  </div>  </div>  <font id="percent">0%</font> </body> <script> var file = null; $(function(){  $("#upload").click(function(){  upload();  }); }); var input = document.getElementById("file_upload");  //檔案域選擇檔案時, 執行readFile函數 input.addEventListener('change',readFile,false);  function readFile(){  file = this.files[0]; } //上傳檔案 function upload(){  var xhr = new XMLHttpRequest();   var fd = new FormData();   fd.append("fileName", file);   //監聽事件  xhr.upload.addEventListener("progress", uploadProgress, false);   //傳送檔案和表單自訂參數  xhr.open("POST", "../UploadServlet",true);   xhr.send(fd);  }   function uploadProgress(evt){  if (evt.lengthComputable) {     //evt.loaded:檔案上傳的大小 evt.total:檔案總的大小     var percentComplete = Math.round((evt.loaded) * 100 / evt.total);   //載入進度條,同時顯示資訊    $("#percent").html(percentComplete + '%')   $("#progressNumber").css("width",""+percentComplete+"px");   }  } </script> </html> 

以上就是關於ajax實現帶進度條的檔案上傳全部內容,希望對大家的學習有所協助。

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。