如何從HTML表單獲取數據發佈進度

我已經創建了一個HTML表單元素，如下所示，用於文件上傳。目前該文件可以正確上傳到服務器。如何從HTML表單獲取數據發佈進度

<form id="file_upload_form" action="http://localhost:8000/v1/file?op=upload" enctype="multipart/form-data" method="post"> 
    <input type="file" name="xxx"> 
    <input type="submit" value="Send"> 
</form>

我想通過純jQuery/JS獲取文件上傳進度。我從我的研究中得到了一些如下代碼。

$("#file_upload_form").submit(function(){ 
    console.log("here"); 
    var xhr = new XMLHttpRequest(); 
    xhr.upload.addEventListener("progress", function (evt) 
    { 
     if(evt.lengthComputable) 
     { 
      var progressPercent = (evt.loaded/evt.total) * 100; 
      console.log(progressPercent);//your function. 
     } 
    }, false); 
});

但程序一直沒有碰上事件監聽。我的HTML表單可以通過純jQuery/JS獲得文件上傳進度嗎？

來源

2015-09-06 ybdesire

入住這 http://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery – Kavin

感謝@Kavin的建議。我在問這個問題之前檢查了這個鏈接。他們的回答不適合我的情況。你會在這裏提供一些基於我的代碼的建議嗎？ – ybdesire

好吧，它看起來像你從來沒有真正上傳數據，所以程序永遠不會進入EventListener。嘗試是這樣的：

$.ajax({ 
    xhr: function() 
    { 
    var xhr = new window.XMLHttpRequest(); 
    //Upload progress 
    xhr.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with upload progress 
     console.log(percentComplete); 
     } 
    }, false); 
    //Download progress 
    xhr.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with download progress 
     console.log(percentComplete); 
     } 
    }, false); 
    return xhr; 
    }, 
    type: 'POST', 
    url: "/", 
    data: {}, 
    success: function(data){ 
    //Do something success-ish 
    } 
});

這裏瞭解更多：JQuery ajax progress

來源

2015-09-06 10:12:02

謝謝@Maxim。我的表單元素可以正確地將文件上傳到服務器端。通過表單選擇的文件可以直接發佈到服務器，我不需要觸摸文件數據。但是您的解決方案似乎需要獲取文件數據，並且文件數據由此ajax POST發送，而不是由POST形式發送。我只是想通過表單元素髮布數據。你知道如果文可以得到形式POST進展（而不是Ajax POST進展）嗎？ – ybdesire

如何從HTML表單獲取數據發佈進度

回答

相關問題