html 显示文件名,JS多选文件并显示文件名列表

一个在火狐、Chrome、Opera浏览器中的选择文件功能，JS连续多选文件，选中文件后立即在旁边显示文件名，可继续选择，就像QQ邮箱里的添加附加功能类似。下面请看青岛星网跟大家分享：JS多选文件并显示文件名列表

若需要把这些选择的文件上传或发送，则需要相应的服务器端脚本来辅助实现，今天主要是来演示JS的实现代码。

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[i].name;

ul.appendChild(li);

}

if(!ul.hasChildNodes()){

var li = document.createElement("li");

li.innerHTML = "没有文件被选中.";

ul.appendChild(li);

}

}