对于Web程序员来说,在网页上处理文件上传,总是一件很麻烦的事情。在过去,我们不能够通过拖拽上传图片,也没有复杂Ajax上传技术,很少处理多文件批量上传。我们也无法获取上传过程中的信息,除非上传完成后从服务器端获得。有时候,等你上传完毕后才发现上传的文件不合适!

如今,HTML5的革命,现代浏览器的诞生,JavaScript的升级,这些给我们提供了使用Javascript和input[type=file]元素获取上传文件过程信息的能力。

下面就来看看这些上传文件API是如何使用的!

访问要上传的文件列表信息

如果要获得所有input[type=file]里要上传的文件列表,你需要使用files属性:

// Assuming <input type="file" id="upload" multiple>

var uploadInput = document.getElementById('upload');

uploadInput.addEventListener('change', function() {
 console.log(uploadInput.files) // File listing!
});

不幸的是,这个FileList并没有一个叫做forEach的方法,所以我们只能使用老式的循环技巧对FileList进行循环操作:

for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {
 console.log(files[i]);
}

很重要的一点,FileList里是有一个length属性的。

获取单个上传文件的信息

FileList里的每个文件对象里都保存着大量的关于这个文件的信息,包括文件的体积大小,文件MIME类型,最后修改时间,文件名称等:

{
 lastModified: 1428005315000,
 lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
 name: "profile.pdf",
 size: 135568,
 type: "application/pdf",
 webkitRelativePath: ""
}

这些基础信息对我们来说最大的用处就是,我们可以在上传文件之前校验它们。例如,你可以校验文件的类型和体积大小:

var maxAllowedSize = 500000;

for (var i = 0, fileCount = uploadInput.files.length, totalSize = 0; i < fileCount; i++) {
 totalSize += files[i].size;
 if(totalSize > maxAllowedSize) {
 // Notify the user that their file(s) are too large
 }

 if(files[i].type != 'application/pdf') {
 // Notify of invalid file type for file in question
 }
}

如果用户上传的文件的体积太大,超过了允许范围,或上传的类型不对,你可以阻止用户上传,然后给予他们必要的提示,是什么原因不能上传成功。

以上就是对文件上传API做的简单介绍,希望对大家的学习有所帮助。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。