Question

我有一个脚本来显示用户上传图片的进度条。这个上传表单位于一个开放式的fancybox中，我想在图片上传完毕后关闭它。

如果我在用户点击提交按钮关闭fancybox时使用onclick事件，则无法完成图片上传过程。

以下是我对进度条的看法。我想知道在进度条发出完成消息后是否有办法关闭fancybox？

<script>
$(document).on('submit', 'form[profile-picture-data-remote]', function(e) {
        e.preventDefault();
        var fd = new FormData(this);

        $.ajax({
          url: $(this).attr('action'),
          xhr: function() {
               var xhr = new XMLHttpRequest();
               var total = 0;

               $.each(document.getElementById('profile-image-upload').files, function(i, file) {
                      total += file.size;
               });

               xhr.upload.addEventListener("progress", function(evt) {
                      var loaded = (evt.loaded / total).toFixed(2)*100;
                      $('#progress-container').css({
                          'display': 'block'
                        });
                      $('#progress').text('Uploading... ' + loaded + '%');
                      $('#progress').css({
                        'width': loaded+'%'
                      });
               }, false);
               return xhr;
          },
          type: 'post',
          processData: false,
          contentType: false,
          data: fd,
          success: function(data) {
            var div = $('<div id="progress" class="uk-progress-bar" style="width: 100%;">Done!</div>')
            $('#progress').replaceWith(div);

// ** IS THERE SOMETHING I CAN DO HERE TO CLOSE FANCYBOX NOW THAT THE IMAGE UPLOAD IS COMPLETE? **
          }
        });
    });
</script>

Answer 1

关闭fancybox的命令是$.fancybox.close()

如果进度条位于fancybox中的IFrame中，则您需要使用parent.$.fancybox.close()

使用适当的命令替换success方法中的注释应该有效。

在文件上传进度结束时关闭fancybox

1 个答案: