查看原文
其他

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

webhek 前端早读课 2019-06-26

来自早读君:

这一两天在修改某项目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理解。


来自童鞋的提问:

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

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

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

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


长按图片识别图中二维码



    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存