从技术角度看,你只需要在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>
里面有个属性alt描述属性<img src="图片地址" alt="图片描述" />这样鼠标移动上去就显示图片描述。但这种方法勿滥用,有可能被K。如果要实现框的形式可以百度搜索下“鼠标移动上去d出框”看下js就知道了欢迎分享,转载请注明来源:内存溢出
评论列表(0条)