<table>
<tr>
<td> <img src=1.jpg/>
</td>
<td> <img src=2.jpg/>
</td>
..........
</tr>
</table>
从技术角度看，你只需要在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将仅仅只接受到最后一个文件。//改好了没问题..加文件试试<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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）