在現有的上傳按鈕中附加進度條

Question

我有一個瀏覽按鈕，用戶可以通過它瀏覽高達100 MB的文件。但問題是，當用戶提交表單時，它會上傳attch文件。它並沒有在任何地方顯示多少文件上傳。我想用進度條顯示它。

U可以訪問我的網站http://historikindia.com/contact_us.php。

請幫我這麼做。它現在將附件發送到我的電子郵件。但我需要向用戶顯示進度條，否則他們可能會認爲它沒有正確響應（對於大文件上傳）。

Answer 1

以下是更新狀態欄的ajax上傳器的代碼。你需要在你的html頁面有一個html5進度條才能使用。

function progressHandlingFunction(e){ 
    if(e.lengthComputable){ 
     $('progress').attr({value:e.loaded,max:e.total}); 
    } 
} 

$('#btnupload').click(function(){ 
       var formData = new FormData(document.getElementById('fileupload')); 
       $.ajax({ 
        url: 'upload.php', //server script to process data 
        type: 'POST', 
        xhr: function() { // custom xhr 
         myXhr = $.ajaxSettings.xhr(); 
         if(myXhr.upload){ // check if upload property exists        
          myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload 
         } 
         return myXhr; 
        }, 
        //Ajax events 
        beforeSend: function (e) { return true; }, 
        success: function (json) { return true; }, 
        error: function (json) { return false; }, 
        // Form data 
        data: formData, 
        dataType: "json", 
        //Options to tell JQuery not to process data or worry about content-type 
        cache: false, 
        processData: false 
       }); 
      }); 

HTML5進度條看起來像這樣

<progress value="1" max="100"></progress>