jquery - 使用uploadify后台上传

Question

我正在使用 Jquery UI 对话框中的 uploadify flash 组件来使用 AJAX 将文件上传到 Web 服务器。但是，在多个文件上传的情况下，用户必须等到所有文件都上传完毕。

在那之前，无法关闭该对话框 - 如果用户关闭对话框，则上传者丢失。

那么，如何使用 uploadify 或任何其他插件在后台上传文件？

Answer 1

首先，当用户点击提交按钮上传文件时，您需要禁用关闭对话框按钮。

然后在初始化uploadify的时候，可以使用一些方法。Uploadifu 有一个“ queueComplete ”方法，可以让您知道所有文件何时处理完毕。这是该站点提供的示例。

$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onQueueComplete' : function(queueData) {
            alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
        }
    });
});

上传所有文件后，onQueueComplete 将触发您放在那里的代码。因此，您可以从那里启用关闭对话框按钮。

至于启用/禁用对话框按钮，您需要向我们提供按钮的代码。是简单的链接吗？

Answer 2

您可以通过以下步骤实现后台上传：

1）在灯箱/用户界面对话框上创建上传。

2）在uploadify下方提供一个按钮，例如完成/开始上传，当用户单击此按钮时隐藏弹出框，隐藏覆盖并调用uploadify方法开始上传文件。

注意：尝试使用 z-index 将弹出框/对话框隐藏在其他元素下方。

Answer 3

只需更改上传对话框的css，以便在开始上传时它变成窗口底部的一个栏，怎么样？完全删除对话框不是一个好主意，用户不知道上传何时完成以及何时可以安全地离开页面。

如果你真的想删除对话框而不删除上传，总是有

$(".upload_dialog").css({ 'display':'none' });

编辑：我尝试了uploadify网站，似乎包含上传对话框的div有一个类“uploadify-queue”，里面的项目是“uploadify-queue-item”。如果您使用的是 Chrome 或 Firefox，您可以通过右键单击您感兴趣的元素并选择“检查元素”来解决类似问题。如果您正在使用 Chrome 或 Firefox 以外的任何东西进行开发，请立即切换！

因此，将其添加到您的 CSS 中应该会在屏幕底部为您提供一个栏。

.uploadify-queue 
{
  margin: 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  background: whiteSmoke;
}