在线html文件上传,html5文件上传-程序员宅基地

技术标签：在线html文件上传

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

本文链接：https://blog.csdn.net/weixin_28567617/article/details/117779529

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

2024最新计算机毕业设计选题大全-程序员宅基地

文章浏览阅读1.6k次，点赞12次，收藏7次。大家好！大四的同学们毕业设计即将开始了，你们做好准备了吗？学长给大家精心整理了最新的计算机毕业设计选题，希望能为你们提供帮助。如果在选题过程中有任何疑问，都可以随时问我，我会尽力帮助大家。在选择毕业设计选题时，有几个要点需要考虑。首先，选题应与计算机专业密切相关，并且符合当前行业的发展趋势。选择与专业紧密结合的选题，可以使你们更好地运用所学知识，并为未来的职业发展奠定基础。要考虑选题的实际可行性和创新性。选题应具备一定的实践意义和应用前景，能够解决实际问题或改善现有技术。

dcn网络与公网_电信运营商DCN网络的演变与规划方法(The evolution and plan method of DCN)...-程序员宅基地

文章浏览阅读3.4k次。摘要：随着电信业务的发展和电信企业经营方式的转变，DCN网络的定位发生了重大的演变。本文基于这种变化，重点讨论DCN网络的规划方法和运维管理方法。Digest: With the development oftelecommunication bussiness and the change of management of telecomcarrier , DCN’s role will cha..._电信dcn

动手深度学习矩阵求导_向量变元是什么-程序员宅基地

文章浏览阅读442次。深度学习一部分矩阵求导知识的搬运总结_向量变元是什么

月薪已炒到15w？真心建议大家冲一冲数据新兴领域，人才缺口极大！-程序员宅基地

文章浏览阅读8次。近期，裁员的公司越来越多今天想和大家聊聊职场人的新出路。作为席卷全球的新概念ESG已然成为当前各个行业关注的最热风口目前，国内官方发布了一项ESG新证书含金量五颗星、中文ESG证书、完整ESG考试体系、名师主讲...而ESG又是与人力资源直接相关甚至在行业圈内成为大佬们的热门话题...当前行业下行，裁员的公司也越来越多大家还是冲一冲这个新兴领域01 ESG为什么重要？在双碳的大背景下，ESG已然成...

对比传统运营模式，为什么越拉越多的企业选择上云？_系统上云的前后对比-程序员宅基地

文章浏览阅读356次。云计算快速渗透到众多的行业，使中小企业受益于技术变革。最近微软SMB的一项研究发现，到今年年底，78％的中小企业将以某种方式使用云。企业希望投入少、收益高，来取得更大的发展机会。云计算将中小企业信息化的成本大幅降低，它们不必再建本地互联网基础设施，节省时间和资金，降低了企业经营风险。科技创新已成时代的潮流，中小企业上云是创新前提。云平台稳定、安全、便捷的IT环境，提升企业经营效率的同时，也为企业..._系统上云的前后对比

esxi网卡直通后虚拟机无网_esxi虚拟机无法联网-程序员宅基地

文章浏览阅读899次。出现选网卡的时候无法选中，这里应该是一个bug。3.保存退出，重启虚拟机即可。1.先随便选择一个网卡。2.勾先取消再重新勾选。_esxi虚拟机无法联网