多文件上传方案

多文件上传,最简单的方案当然是一个表单里放多个file控件,这种方案最大的缺点,你我都知道,就是文件都很大,一次提交多个很大的文件,后果大家都知道,所以就有各种将多个文件上传拆分为单个文件上传的方案。

1、file上使用onchange事件提交,一旦选择了文件就触发表单提交,一般是提交到一个隐藏的iframe里,这样又做到了单个上传,又做到了无刷新提交,缺点是如果用户选错文件,改都来不及。

2、一个表单一个file,通过一个提交按钮,遍历表单,逐个提交,第一种方案的缺点当然是解决了,不过还是有问题,如果提交按钮连续提交的话,服务器端压力还是不小的。改进方案是先提交一个,等待iframe返回结果,再触发下一个表单提交,顺序提交。

范例代码

<form method=”post” name=”EditFrm1″ enctype=”multipart/form-data” target=”iframe1″ action=””>
<input type=”hidden” name=”index” value=”1″>
<input name=”test” type=”file” id=”upload1″ />
</form>
<form method=”post” name=”EditFrm2″ enctype=”multipart/form-data” target=”iframe2″ action=””>
<input type=”hidden” name=”index” value=”2″>
<input name=”test” type=”file” id=”upload2″ />
</form>
<iframe name=”iframe1″ id=”iframe1″ style=”display:none”></iframe>
<iframe name=”iframe2″ id=”iframe2″ style=”display:none”></iframe>
<input onclick=”submitforms()” value=”提交”>
<script language=”javascript”>
var index = 1;
function submitforms(){
var max = 2;
if(index <= max && document.getElementById(“upload”+index).value != “”){
if(!document.getElementById(“upload”+index).value.match(/.doc|.pdf|.zip|.rar|.xls|.xlsx/i)){
alert(“.doc|.pdf|.zip|.rar|.xls|.xlsx only”);
return false;
}else{
document.forms[‘EditFrm’+index].submit();
document.getElementById(“upload”+index).value = “”;
}
}
}
</script>
// 提交结果页面输出
<script language=”javascript”>
// 可能直接parent.index++;就可以了
parent.window.document.index++;
parent.window.document.submitforms();
</script>

发表评论