html5文件上传

上文介绍了如何通过ajax异步上传文件，html5对file的新接口，可以使得在页面上，对用户也有更好的体验。
页面上要做的，仅仅是添加一个html标签：
[cce lang=”html”]
<input id="track" name="track" type="file" multiple="multiple" onchange="showInfo();" />
[/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 = "<td>" + file.name + "</td><td>" + file.size + "</td";
container.appendChild(tr);
}
}
[/cce]
首先，先获取刚才那个标签包含的所有文件对象。然后清空显示容器。最后，遍历所有的文件，绘制一个table来显示。可以看见，我们可以额通过file接口方便的获取文件名称和大小。

这里可以实现的功能就是，用户选择多个文件，然后页面上就会显示出这些文件的名称和大小。有了类似的功能，可以让用户在上传之前确认自己要上传的文件，排序文件上传顺序（这里container id叫sort_table，就是因为使用了jquery-ui的sortable插件，支持用户通过拖拽排序文件）等操作。

转载自：https://coolex.info/blog/358.html