<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<script type="text/javascript">
function imgChange(next) {
if(next != null)
document.getElementById(next).style.display = ""
}
function validate() {
var phos = 2
for(i = 0i <2i++) {
if($("del" + i).checked == true)
phos--
}
for(i = 0i <4i++) {
if($("photoFile" + i).value != "")
phos++
}
if(phos >4) {
alert("图片太多,您最多总共可以保存4张图片!")
return false
}
return true
}
</script>
<form action="/addTrade.do" method="post" enctype="multipart/form-data" onSubmit="return validate()">
<!-- 上传照片-->
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0"
summary="upload pictures">
<tr id="tr_photoFile0">
<td width="119" align="right" class="title">
上传照片:
</td>
<td width="499">
<input type="file" name="photoFile0" id="photoFile0"
size="40" onChange='return imgChange("tr_photoFile1")' />
</td>
</tr>
<tr id="tr_photoFile1" style="display: none">
<td>
</td>
<td>
<input type="file" name="photoFile1" id="photoFile1"
onChange='return imgChange("tr_photoFile2")' size="40" />
</td>
</tr>
<tr id="tr_photoFile2" style="display: none">
<td>
</td>
<td>
<input type="file" name="photoFile2" id="photoFile2"
onChange='return imgChange("tr_photoFile3")' size="40" />
</td>
</tr>
<tr id="tr_photoFile3" style="display: none">
<td>
</td>
<td>
<input type="file" name="photoFile3" id="photoFile3"
onChange='return imgChange(null)' size="40" />
</td>
</tr>
</table>
</div>
<!--/ 上传照片-->
<input name="submit" type="submit" value="提交"/>
</form>
从技术角度看,你只需要在input控件中标注multiple标签就够了
以下就是演示代码:
<!DOCTYPE html><html>
<head>
<title>
Solution 4-5: Sending multiple files
</title>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>Solution 4-5: Sending multiple files</legend>
<label>Upload one or more files:</label>
<input type="file" name="multipleFileUpload" multiple />
</fieldset>
</form>
</body>
</html>
重要心得
用户选择的多个文件传递到服务端后将会被服务端的编程语言去处理的。有些编程语言,比如PHP需要你为name标签的字符添加方括号来支持传输多个文件。
1<input name="filesUploaded[]" type="file" multiple />
这样,PHP将构造一个数据类型的数组,来容纳一个个上传到服务器的文件。相反如果你在HTML标签中不适用方括号的话,PHP将仅仅只接受到最后一个文件。用swfupload吧,这个可以实现,不知道jquery.uploadify可不可以集成到Extjs里,总之swfupload绝对可以,曾经实现过,不过lz应该要研究不少时间,单纯的input type='file'就不用想了欢迎分享,转载请注明来源:内存溢出
评论列表(0条)