使用uploadify上传后台

时间:2012-08-23 12:47:12

标签: jquery css flash uploadify usability

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

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

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

3 个答案:

答案 0 :(得分: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将触发您放置的代码。因此,您可以启用关闭对话框按钮。

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

答案 1 :(得分:1)

如何更改上传对话框的css,以便在上传开始时它变成窗口底部的栏?完全删除对话框不是一个好主意,用户不知道上传何时完成以及何时他/她可以安全地离开页面。

如果你真的想删除对话而不删除上传,那么总是

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

编辑:我尝试了uploadify网站,似乎包含上传对话框的div有一个“uploadify-queue”类,里面的项目是“uploadify-queue-item”。您可以通过右键单击您感兴趣的元素并选择“Inspect element”(如果您使用的是Chrome或Firefox)来计算出类似的内容。如果您正在使用Chrome或Firefox以外的任何其他产品进行开发,请立即切换!

因此,将此添加到CSS应该会在屏幕底部显示一个栏。

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

答案 2 :(得分:1)

您可以使用以下步骤实现后台上传:

1)在lightbox / ui对话框中创建uploadify。

2)在uploadify下方给出一个按钮,如完成/开始上传,当用户点击此按钮隐藏poup框,隐藏覆盖并调用uploadify方法开始上传文件。

注意:尝试使用z-index隐藏其他元素下面的poup /对话框。