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

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 方法中的注释应该可以。