Javascript多个文件上传，一次上传一个

Question

我们有一个包含五个<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);
  });
});

在开始下一次上载之前，我这里需要什么样的结构才能“等待”服务器响应？

Answer 1

我认为您应该监听iframe的load事件并在处理程序中执行输入的切换。我今天用自己的上传器完成了此解决方案，对我来说很有效。

Answer 2

最近，我使用Uploadify取得了很多成功，它非常易于配置，免费，并且可以进行多次上传。它还提供了用于回调函数的选项，使您可以根据需要进行任何配置。

http://www.uploadify.com/

Answer 3

仅供参考：jquery.forms插件是关于进行Ajax表单提交的。我使用此插件在单独的iframe中提交表单（例如文件上传），该插件会自动处理该表单，并在完成后为您提供一个不错的回调。

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

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

Answer 4

可以通过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>

Answer 5

通过从A Strategy for Handling Multiple File Uploads Using Javascript处的代码开始，我能够做到这一点。该代码为每个文件使用XMLHttpRequest，但实际上不检查服务器的结果。我对其进行了修改，以依次等待服务器的结果，如下所示：

var fileNumber = 0
var fileList = []    // see the code linked above for how to handle the fileList
var resultPane = document.getElementById('resultpane')   // a textarea box

sendNext = function() {
  if (fileNumber >= fileList.length) {
    resultPane.value += 'Done uploading '+fileNumber+' files\n'
    return 0
  }
  var formData = new FormData()
  var request = new XMLHttpRequest()
  request.onreadystatechange = function() {
    if (request.readystate == XMLHttpRequest.DONE) {
      resultPane.value += request.responseText    // show whatever the server said about each file
      sendNext()                                  // and send the next file
    }
  }
  formData.set('file', fileList[fileNumber])
  request.open('POST', 'https://example.com/upload-receiver')
  request.send(formData)
  resultPane.value += 'Sending file number '+fileNumber+'\n'
  fileNumber++
}

Javascript多个文件上传，一次上传一个

问题描述投票：1回答：5

5个回答

最新问题

Javascript多个文件上传，一次上传一个

问题描述 投票：1回答：5

5个回答

最新问题

问题描述投票：1回答：5