文件上傳進度結束時關閉fancybox

Question

我有一個腳本來顯示用戶上載圖像時的進度條。 這張上傳表單位於一個打開的花式框內，一旦圖像上傳完成，我想關閉它。

如果我在用戶單擊“提交”按鈕以關閉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()

應該使用適當的命令替換成功方法中的注釋。