多文件上传处理
作者：360weboy博客：http://www.360weboy.com
发现Firefox, Chrome以及Safari三大浏览器已经支持多文件上传，只需要一个添加一个带一个multiple属性的input就可以实现！
HTML结构
<!-- 注意:表单的 enctype属性必须是"multipart/form-data", 这样表单提交的时候，文件数据会被分割成多段-->
<form method="post" action="upload-page.php" enctype="multipart/form-data">
<input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" />
</form>使用javascript列出选中的文件
<ul id="fileList">
<li>暂无文件上传</li>
</ul><script type="text/javascript">
function makeFileList() {
var input = document.getElementById("filesToUpload");
var ul = document.getElementById("fileList");
while (ul.hasChildNodes())
{
ul.removeChild(ul.firstChild);
}
for (var i = 0; i < input.files.length; i++)
{
var li = document.createElement("li");
li.innerHTML = input.files.name;
ul.appendChild(li);
}
if( ! ul.hasChildNodes())
{
var li = document.createElement("li");
li.innerHTML = 'No Files Selected';
ul.appendChild(li);
}
}
</script>通过input.files属性获取选中的文件，其值是一个数组。所以，我们可以length属性来判断文件数组的长度并且遍历它来得到具体的文件路径以及文件名
http://www.360weboy.com/wp-content/uploads/2013/04/list.jpg
服务器端获取的上传数组格式Array
(
=> Array
(
=> Array
(
=> Armenian_1.1stable.zip
=> Catalan_1.1stable.zip
)
=> Array
(
=> application/zip
=> application/zip
)
=> Array
(
=> D:\xampp\tmp\phpA5C7.tmp
=> D:\xampp\tmp\phpA5C8.tmp
)
=> Array
(
=> 0
=> 0
)
=> Array
(
=> 309810
=> 289961
)
)
) <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" />
多选文件？
页:
[1]