Javascript 进度模式上载节点js ajax

我正在构建一个文档文件上传器。我想显示上传状态的百分比

<div class="modal-body">
  <div class="container_upload" id="new_file_form">
    <div id="div_new_file_form" class="text-center" style="padding:2%;">
      <div class="form-group text-center">
        <input type="file" class="form-control" name="file_images"
          id="url_file" multiple="true" accept=".pdf,.doc,.xls,.ppt,.docx,.xlsx,.pptx"/>
      </div>      
      <button class="btn btn-success btn-lg" id="insert_btn">Carica</button>
      <br>
    </div>
  </div>
</div>

在我的节点js route中，我将文件的信息放在数据库中，如果文件不是pdf格式，我将转换它。 因此，我的问题是：如何跟踪上传执行的进度？

---

因为使用xhr.upload.onpgrogress会在Ajax调用之前结束。

我认为您可能没有使用Onchange来让进度条在这一部分工作：

$(".progress-bar").animate({
                    width: percentage 
                }, function() {
                    upload_end = $(".progress-bar").css("width");
                    console.log(upload_end);
                    if(upload_end == "100%") {
                        console.log("ci siamo");
                        $(".end_upload").empty();
                        $(".end_upload").append('Upload completato. Conversione file in corso... ');
                    }
                });

您可能需要将ajax放在onchange函数中，并调用ajax。遵循此操作，可能会对您有所帮助

像这样：

$('.upload-btn').on('click', function (){
    $('#upload-input').click();
    $('.progress-bar').text('0%');
    $('.progress-bar').width('0%');
});

$('#upload-input').on('change', function(){

  var files = $(this).get(0).files;

  if (files.length > 0){
    // create a FormData object which will be sent as the data payload in the
    // AJAX request
    var formData = new FormData();

    // loop through all the selected files and add them to the formData object
    for (var i = 0; i < files.length; i++) {
      var file = files[i];

      // add the files to formData object for the data payload
      formData.append('uploads[]', file, file.name);
    }

    $.ajax({
      url: '/upload',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data){
          console.log('upload successful!\n' + data);
      },
      xhr: function() {
        // create an XMLHttpRequest
        var xhr = new XMLHttpRequest();

        // listen to the 'progress' event
        xhr.upload.addEventListener('progress', function(evt) {

          if (evt.lengthComputable) {
            // calculate the percentage of upload completed
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);

            // update the Bootstrap progress bar with the new percentage
            $('.progress-bar').text(percentComplete + '%');
            $('.progress-bar').width(percentComplete + '%');

            // once the upload reaches 100%, set the progress bar text to done
            if (percentComplete === 100) {
              $('.progress-bar').html('Done');
            }

          }

        }, false);

        return xhr;
      }
    });

  }
});

$（'.upload btn'）。在（'click'，函数（）{
$（“#上载输入”）。单击（）；
$（'.progress bar'）.text（'0%'）；
$（'.progress bar'）.width（'0%'）；
});
$（'#上传输入'）。在（'change'，function（）上{
var files=$（this）.get（0）.files；
如果（files.length>0）{
//创建一个FormData对象，该对象将作为
//AJAX请求
var formData=new formData（）；
//循环浏览所有选定文件并将其添加到formData对象
对于（var i=0；i

Ah进度条。。。狡猾的混蛋。我的建议是根据转换文件所需的平均时间来伪造它，或者更好的做法是使用一个微调器来指示它正在处理它。您是否针对您的问题尝试了此解决方案？

$(".progress-bar").animate({
                    width: percentage 
                }, function() {
                    upload_end = $(".progress-bar").css("width");
                    console.log(upload_end);
                    if(upload_end == "100%") {
                        console.log("ci siamo");
                        $(".end_upload").empty();
                        $(".end_upload").append('Upload completato. Conversione file in corso... ');
                    }
                });

$('.upload-btn').on('click', function (){
    $('#upload-input').click();
    $('.progress-bar').text('0%');
    $('.progress-bar').width('0%');
});

$('#upload-input').on('change', function(){

  var files = $(this).get(0).files;

  if (files.length > 0){
    // create a FormData object which will be sent as the data payload in the
    // AJAX request
    var formData = new FormData();

    // loop through all the selected files and add them to the formData object
    for (var i = 0; i < files.length; i++) {
      var file = files[i];

      // add the files to formData object for the data payload
      formData.append('uploads[]', file, file.name);
    }

    $.ajax({
      url: '/upload',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data){
          console.log('upload successful!\n' + data);
      },
      xhr: function() {
        // create an XMLHttpRequest
        var xhr = new XMLHttpRequest();

        // listen to the 'progress' event
        xhr.upload.addEventListener('progress', function(evt) {

          if (evt.lengthComputable) {
            // calculate the percentage of upload completed
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);

            // update the Bootstrap progress bar with the new percentage
            $('.progress-bar').text(percentComplete + '%');
            $('.progress-bar').width(percentComplete + '%');

            // once the upload reaches 100%, set the progress bar text to done
            if (percentComplete === 100) {
              $('.progress-bar').html('Done');
            }

          }

        }, false);

        return xhr;
      }
    });

  }
});