在线html文件上传,html5文件上传

上文介绍了如何通过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插件，支持用户通过拖拽排序文件)等操作。