【第319期】JavaScript里的文件上传API

来自早读君：

这一两天在修改某项目web移动版意见反馈功能，里面涉及到上传图片的功能，就借此分享下这个api，现在移动版也非常通用。可以了解下。

正文从这开始～

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

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

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

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

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

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

获取单个上传文件的信息

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

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

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

今天就对文件上传API做这么多简单的介绍。这是一个很好的API，帮助我们放置在上传文件时浪费大量的时间。这个文件上传API里很有很多这里没有介绍的知识，你可以到MDN上进心详细阅读

来自早读君：

MDN上的实例代码很值得一看，要学会看demo理解。

来自童鞋的提问：

早读君，我是一名应届生，初学前端也才近一年不足，前几天看到你发布的广州分享会消息，有些想去的冲动，但又感自己才疏学浅，且即将面临校招，需专心复习专业知识，心里很是矛盾。所以想请教早读君，我是否有去报名参加分享会的必要？

@情封：我建议非常有必要去参加分享会，原因就像今天分享的文章一样。你可以通过分享会认识到更多的同行，也可以通过这个平台了解到现在的技术趋势。更有可能的是认识你心仪公司的招聘主管呢。这个也说不定。

第二参加分享会，跟技术水平无关。虽然有可能听不懂或者分享的主题自己没经验，但可以去看看前端原来还可以这么玩。

第三，准备校招，其实不会差这么一天的，你说呢。

长按图片识别图中二维码