Как получить ход данных из формы HTML

Question

Я создал элемент 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); 
}); 

Но программа никогда не запускается в EventListener. Можно ли получить процесс загрузки файла чистым jQuery/JS для моей HTML-формы?

Answer 1

Ну, похоже, что вы никогда не загружаете данные, поэтому программа никогда не запускается в 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