在现有的上传按钮中附加进度条

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>