代码之家 › 专栏 › 技术社区 › Josh Stodola

javascript多文件上传,一次按顺序一个

file-upload asynchronous iframe jquery javascript

Josh Stodola · 技术社区 · 15 年前

我们有五个人的表格 <input type="file"/> 生产和工作中的要素。我们有时会得到请求超时和maxrequestlength超过错误。为了避免这些错误,我计划编写一些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);
  });
});

在开始下一次上传之前,我需要什么样的构造来“等待”服务器响应?

4 回复 | 直到 15 年前

Alex Ustinov 15 年前

我认为您应该监听iframe的加载事件,并在处理程序中执行输入的切换。我今天完成了自己的上传程序,这个解决方案对我有效。

jbnunn 15 年前

我最近使用uploadify取得了很大的成功——它是非常可配置的、免费的,并且允许多次上传。它还为回调函数提供了选项,允许您以任何方式真正配置它。

http://www.uploadify.com/

Dmitriy Likhten 15 年前

仅供参考:jquery.forms插件主要是关于提交Ajax表单。我使用这个插件在一个独立的iframe中提交一个表单(比如文件上传),插件会自动处理这个表单,并在完成时给您一个很好的回调。

这样你的大部分工作就完成了。

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

Aleks 14 年前

它可以在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>