Javascript多个文件上传，按时间顺序排列一个

问题描述：

我们有一个表格，其中有五个<input type="file"/>元素，它们在生产和工作中都很棒。我们会收到请求超时，并且MaxRequestLength有时会超出错误。为了防止这些错误，我计划编写一些Javascript来一次性上传文件，而不是一次性上传文件。这里是我的计划就这样做...Javascript多个文件上传，按时间顺序排列一个

上的document.ready，注入一个隐藏的iframe制作成网页
更改<form>为目标的iframe
禁用窗体上的所有元素（这可以阻止它们被张贴）
启用一个文件上传的时间和提交表单
等待来自服务器的响应
当服务器响应打印进入的iframe，开始下一次上传
所有上传完成后，刷新页面，该页面将调用一些填充网格的服务器端逻辑。

我的问题是与第5号。通常我想我可以弄清楚这没有问题，但我只是有一个我的大脑在罢工的日子。这是我的代码到目前为止...

$(function() { 
    $("<iframe/>").attr("src", "test.htm").attr("name", "postMe").hide().appendTo("body"); 
    $("form").attr("target", "postMe").submit(function(e) { 
    e.preventDefault(); 
    $("#btnSubmit").attr("disabled", "disabled").val("Please Wait, Files are Uploading"); 

    for(var i = 1; i < 6; i++) { 
     $("input[type=file]").attr("disabled", "disabled"); 
     $("#FileUpload" + i).removeAttr("disabled"); 
     $("form")[0].submit(); 
     // HELP!!! 
     // How do I wait for server before next iteration? 
    } 

    location.reload(true); 
    }); 
});

我需要什么样的构造，以便在启动下一个上传之前“等待”服务器响应？

我应该注意到我想自己写这段代码，而不是使用一些花哨的插件与一堆依赖关系。 – 2009-12-02 15:09:59

如果这太痛苦了，我可能会尝试使用五个iframe！这是我想做的最后一件事，但可能是我必须做的。 – 2009-12-02 15:19:34

@Stodola没有人想要与闪光灯做任何事情'真的是主观的。你用Flash的问题是什么？我试图向您提供有关Uploadify的更多信息。 “我不明白为什么你想重新创造一些已经完美工作的东西，如果你只是寻找其他存在的解决方案。 – 2009-12-23 15:25:22

答

我认为你应该监听iframe的加载事件并在处理程序中执行输入切换。我今天完成了自己的上传程序，并且此解决方案适用于我。

有趣的方法！非常感谢，我会尝试这个。 – 2009-12-02 15:49:48

+1我不认为你会找到一种方法来实际阻止并等待iframe加载;你会想让你的代码异步，并在iframe准备好进行下一次迭代时获得回调。 – 2009-12-02 17:01:53

任何机会，你可以告诉我一些代码亚历克斯？我挣扎着。 – 2009-12-02 17:33:29

答

只是供参考：jquery.forms插件是关于制作ajax表单的子插件。我使用这个插件在插件自动处理的单独的iframe中提交表单（例如文件上传），并在完成时给你一个很好的回调。

这样你的大多数工作就完成了。

http://jquery.malsup.com/form/

不错！我喜欢这个回调，我将深入研究这段代码，看看它是如何工作的，但我可能不会使用这个插件。 – 2009-12-02 17:06:13

没有什么能够一次完成一次上传，这最终是我所追求的。 – 2009-12-02 22:27:19

第1步：使用插件创建文件上传机制。第2步：使用成功处理程序再次触发第1步。依此类推。记住它拥有所有的jQuery Ajax事件回调。 – 2009-12-24 16:38:53

答

我已经有很多成功的最近使用Uploadify - 这是非常可配置的，免费的，并允许多次上传。它还提供了回调函数选项，可以让您真正以任何您想要的方式进行配置。

http://www.uploadify.com/

你是认真的吗？它需要Flash。我决不会使用它。 – 2009-12-02 22:25:44

Flash有什么问题？ – 2009-12-23 15:30:50

为什么不呢？ SWFUpload和配合工作很好，并且他们为HTML/JS所没有的文件上传开放了许多可能性。 – 2009-12-23 15:31:30

答

它可以与jQuery的queue方法和load事件的帮助下完成的。

<!DOCTYPE HTML> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script> 
//here's an upload script 
(function($){ 
    //make 'em accessible within the scope 
    var $iframe, $form; 

    $(document).ready(function(){ 
     //create 'em only once, but use 'em many times 
     $iframe = $('<iframe name="iframe" id="iframe" style="display:none"></iframe>').appendTo('body');  
     $form = $('<form method="post" enctype="multipart/form-data" target="iframe" style="display:none"></form>').appendTo('body'); 
    }); 

    var iframeUpload = $({}); 

    $.iframeUpload = function(s){ 
     iframeUpload.queue(function(next){ 
      //as we only wanna this new event 
      $iframe.load(function(){ 
       //we must unbind the old one 
       $iframe.unbind('load'); 

       //success or error, the question is up to you 
       s.success(); 

       //but remember to remove or replace the old stuff 
       $form.find('input').remove(); 

       next(); 
      }); 

      $form.attr('action', s.url).append(s.file).submit(); 
     }); 
    }; 
})(jQuery); 
//and this is how to use the script 
(function($){$(document).ready(function(){ 
    $('input[type="submit"]').click(function(){ 
     $('input[type="file"]').each(function(){ 
      $.iframeUpload({ 
       url: 'http://example.com/upload.php', 
       file: this, 
       success: function(){ 
        console.log('uploaded'); 
       } 
      }); 
     }); 
    }); 
})})(jQuery); 
</script> 
</head> 
<body> 
    <!-- here are multiple files --> 
    <input type="file" name="file" /> 
    <input type="file" name="file" /> 
    <input type="file" name="file" /> 
    <!-- to upload --> 
    <input type="submit" /> 
</body> 
</html>

Javascript多个文件上传，按时间顺序排列一个

相关推荐