上文介绍了如何通过ajax异步上传文件,html5对file的新接口,可以使得在页面上,对用户也有更好的体验。
页面上要做的,仅仅是添加一个html标签:
[cce lang="html"]
[/cce]
这里在input的change事件上绑定了showInfo函数,当选择文件的时候,就会被触发。属性中增加multiple,表明这个标签支持多个文件。
showInfo的作用,顾名思义,就是读取上传文件的内容,展示给用户。这里是所有的代码:
[cce lang="javascript"]
function showInfo() {
var fileList = document.getElementById('track').files;
var container = document.getElementById('sort_table');
//first clear
while (container.firstChild) {
container.removeChild(container.firstChild);
}
for(var i = 0; i < fileList.length; i++) {
var file = fileList[i];
var tr = document.createElement('tr');
tr.setAttribute("id", i);
tr.innerHTML = "
" + file.name + "" + file.size + "container.appendChild(tr);
}
}
[/cce]
首先,先获取刚才那个标签包含的所有文件对象。然后清空显示容器。最后,遍历所有的文件,绘制一个table来显示。可以看见,我们可以额通过file接口方便的获取文件名称和大小。
这里可以实现的功能就是,用户选择多个文件,然后页面上就会显示出这些文件的名称和大小。有了类似的功能,可以让用户在上传之前确认自己要上传的文件,排序文件上传顺序(这里container id叫sort_table,就是因为使用了jquery-ui的sortable插件,支持用户通过拖拽排序文件)等操作。