如何在ajax文件上傳中顯示進度條

我的代碼發佈了ajax請求，但沒有顯示進度條。請幫助更正代碼以顯示工作進度欄。如何在ajax文件上傳中顯示進度條

$(document).ready(function() { 
    $("#uploadbutton").click(function() { 
    var filename = $("#file_path$i").val(); //get form data; 

    $.ajax({ 
     type: "html", 
     url: "share.php",//onwhich post ajax data; 
     enctype: 'multipart/form-data', 
     data: { 
     file: filename 
     }, 
     success: function() { 
     alert("Data Uploaded: "); 
     } 
    }); 
}); 
});

來源

2013-02-11 user2060312

不幸的是，$.ajax方法不會返回任何progres信息。

而且，也沒有跨瀏覽器解決這個僅使用HTML和JavaScript。我會建議看看Uploadify。

來源

2013-02-11 06:02:45 whitneyit

這是BlueImp的jQuery的文件上傳：

首先，下載：https://github.com/blueimp/jQuery-File-Upload/archives/master

現在，上傳JS文件夾。

讓您的.html：

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>jQuery File Upload Example</title> 
    <style> 
    .bar { 
     height: 18px; 
     background: green; 
     } 
    </style> 
    </head> 
    <body> 
    <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple> 
    <div id="progress"> 
     <div class="bar" style="width: 0%;"></div> 
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="js/vendor/jquery.ui.widget.js"></script> 
    <script src="js/jquery.iframe-transport.js"></script> 
    <script src="js/jquery.fileupload.js"></script> 
    <script> 
    $(function() { 
     $('#fileupload').fileupload({ 
      dataType: 'json', 
      done: function (e, data) { 
       $.each(data.result.files, function (index, file) { 
        $('<p/>').text(file.name).appendTo(document.body); 
       }); 
      } 
     }); 
progressall: function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#progress .bar').css(
      'width', 
      progress + '%' 
     ); 
    } 
    }); 
    </script> 
    </body> 
    </html>

我沒有測試過這一點，但它應該是功能。讓我知道如果它不是。

可選：在您的.css文件中包含<style></style>的內容。

可選：將.js包含在.js <script src=""></script>標記中。

來源：https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

來源

2013-02-11 06:05:30 Pachonk

@whitneyit：我們可以使用XHR：AJAX的功能來跟蹤文件上傳這樣的事情

$.ajax({ 
       url: 'handler/FileUploader.ashx?FileName=' + file.name, //server script to process data 
       type: 'POST', 
       xhr: function() { 
        myXhr = $.ajaxSettings.xhr(); 
        if (myXhr.upload) { 
         myXhr.upload.addEventListener('progress', progressHandlingFunction, false); 
        } 
        return myXhr; 
       }, 
       success: function (result) {      
        //On success if you want to perform some tasks. 
       }, 
       data: file, 
       cache: false, 
       contentType: false, 
       processData: false 
      }); 
      function progressHandlingFunction(e) { 
       if (e.lengthComputable) { 
        var s = parseInt((e.loaded/e.total) * 100); 
        $("#progress" + currFile).text(s + "%"); 
        $("#progbarWidth" + currFile).width(s + "%"); 
        if (s == 100) { 
         triggerNextFileUpload(); 
        } 
       } 
      }

來源

2014-02-22 19:24:46

如何在ajax文件上傳中顯示進度條

回答

相關問題