如何从HTML表单中获取数据post进度

How to get the data post progress from HTML form

本文关键字：获取 数据 post 进度 表单 HTML      更新时间：2023-09-26

我已经创建了一个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表单?

看起来您从未真正上传过数据，因此程序从未运行到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

相关文章：