html5文件上传-阿里云开发者社区

开发者社区> 开发与运维> 正文

html5文件上传

简介: 上文介绍了如何通过ajax异步上传文件,html5对file的新接口,可以使得在页面上,对用户也有更好的体验。 页面上要做的,仅仅是添加一个html标签: [cce lang=”html”] <input id="track" name="track" type="file" multiple
上文介绍了如何通过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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章