h5中文件上传下载实例

前言

HTML5 中提供的文件API在前端中有着丰富的应用，上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好，包括移动端，除了 IE 只支持 IE10 以上的版本。想要更好地掌握好操作文件的功能，先要熟悉每个API。

原文作者：林鑫，作者博客：

FileList 对象和 file 对象

HTML 中的 input[type="file"] 标签有个 multiple 属性，允许用户选择多个文件，FileList对象则就是表示用户选择的文件列表。这个列表中的每一个文件，就是一个 file 对象。

file 对象的属性：

name : 文件名，不包含路径。

type : 文件类型。图片类型的文件都会以 image/ 开头，可以由此来限制只允许上传图片。

size : 文件大小。可以根据文件大小来进行其他操作。

lastModified : 文件最后修改的时间。

<input type="file" id="files" multiple><script>var elem = document.getElementById('files');elem.onchange = function (event) {var files = event.target.files;for (var i = 0; i < files.length; i++) {// 文件类型为 image 并且文件大小小于 200kbif(files[i].type.indexOf('image/') !== -1 && files[i].size < 204800){console.log(files[i].name);}}}</script> 

查看更多关于h5中文件上传下载实例的详细内容...