Javascript多文件上传，顺序一次一个
我们有一个包含五个Javascript多文件上传，顺序一次一个,javascript,jquery,iframe,asynchronous,file-upload,Javascript,Jquery,Iframe,Asynchronous,File Upload,我们有一个包含五个元素的表单，该表单正在生产中，运行良好。有时会出现请求超时和MaxRequestLength超出错误。为了防止这些错误，我计划编写一些Javascript来一次上传文件，而不是一次上传所有文件。下面是我打算怎么做的 在document.ready上，将隐藏的iframe插入页面 将更改为以iframe为目标 禁用表单上的所有元素（这将阻止发布这些元素） 启用一次上载一个文件并提交表单 等待服务器的响应 当服务器响应打印到iframe中时，开始下一次上载 完成所有上传后，刷新页面
$(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);
});
});
$（函数（）{
$（“”）.attr（“src”，“test.htm”）.attr（“name”，“postMe”）.hide（）.appendTo（“body”）；
$（“form”）.attr（“target”、“postMe”）.submit（函数（e）{
e、 预防默认值（）；
$（“#btnSubmit”）.attr（“disabled”、“disabled”）.val（“请稍候，文件正在上载”）；
对于（变量i=1；i<6；i++）{
$（“输入[类型=文件]”）.attr（“已禁用”、“已禁用”）；
$（“#文件上载”+i）.removeAttr（“禁用”）；
$（“表单”）[0]。提交（）；
//救命啊！！！
//如何在下一次迭代之前等待服务器？
}
位置。重新加载（true）；
});
});
在开始下一次上载之前，我需要什么样的构造才能“等待”服务器响应？我认为您应该侦听iframe的加载事件，并在处理程序中执行输入切换。我今天完成了我自己的上传程序，这个解决方案对我很有效。我认为您应该侦听iframe的加载事件，并在处理程序中执行输入切换。今天我完成了我自己的上传程序，这个解决方案对我很有效。仅供参考：jquery.forms插件是关于提交ajax表单的。我使用这个插件在一个单独的iframe中提交一个表单（比如文件上传），插件会自动处理这个表单，并在完成时给你一个很好的回调 这样你的大部分工作就完成了
仅供参考：jquery.forms插件是关于提交ajax表单的。我使用这个插件在一个单独的iframe中提交一个表单（比如文件上传），插件会自动处理这个表单，并在完成时给你一个很好的回调 这样你的大部分工作就完成了
我最近使用Uploadify取得了很多成功——它非常可配置、免费，并且允许多次上传。它还提供了回调函数选项，允许您以任何方式对其进行真正的配置
我最近使用Uploadify取得了很多成功——它非常可配置、免费，并且允许多次上传。它还提供了回调函数选项，允许您以任何方式对其进行真正的配置
可以借助jQuery的方法和事件来完成
//这里有一个上传脚本
（函数（$）{
//使其在范围内可访问
var$iframe$form；
$（文档）.ready（函数（）{
//只创建一次，但要多次使用
$iframe=$（''）.appendTo（'body'）；
$form=$（''）.appendTo（'body'）；
});
变量iframeUpload=$（{}）；
$.iframeUpload=函数{
iframeUpload.queue（函数（下一步）{
//因为我们只想参加这个新的活动
$iframe.load（函数（）{
//我们必须解开旧的
$iframe.unbind（'load'）；
//成功与否，取决于你自己
s、 成功（）；
//但请记住移除或更换旧的东西
$form.find（'input'）.remove（）；
next（）；
});
$form.attr（'action'，s.url）.append（s.file.submit（）；
});
};
})（jQuery）；
//这就是如何使用脚本
（函数（$）{$（文档）.ready（函数（）{
$（'input[type=“submit”]”）。单击（函数（）{
$（'input[type=“file”]”）。每个（函数（）{
$.iframeUpload({
网址：'http://example.com/upload.php',
档案:这个,，
成功：函数（）{
console.log（'upload'）；
}
});
});
});
})})（jQuery）；
//这里有一个上传脚本
（函数（$）{
//使其在范围内可访问
var$iframe$form；
$（文档）.ready（函数（）{
//只创建一次，但要多次使用
$iframe=$（''）.appendTo（'body'）；
$form=$（''）.appendTo（'body'）；
});
变量iframeUpload=$（{}）；
$.iframeUpload=函数{
iframeUpload.queue（函数（下一步）{
//因为我们只想参加这个新的活动
$iframe.load（函数（）{
//我们必须解开旧的
$iframe.unbind（'load'）；
//成功与否，取决于你自己
s、 成功（）；
//但请记住移除或更换旧的东西
$form.find（'input'）.remove（）；
next（）；
});
$form.attr（'action'，s.url）.append（s.file.submit（）；
});
};
})（jQuery）；
//这就是如何使用脚本
（函数（$）{$（文档）.ready（函数（）{
$（'input[type=“submit”]”）。单击（函数（）{
$（'input[type=“file”]”）。每个（函数（）{
$.iframeUpload({
网址：'http://example.com/upload.php',
档案:这个,，
成功：函数（）{
安慰
<!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>
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++
}