选择图片
选择图片有什么好讲的呢？不就一个 input[type=file] ，然后点击就可以了吗？确实是这样的，但是，我们想要做得更加的友好一些，比如需要过滤掉非图片文件， 或只允许从摄像头拍照获取图片等，还是需要进行一些简单配置的。
<input type="file" />
点击选择文件可以查看到非图片类型的文件，这并不是我们想要的结果，毕竟我们只想要图片类型。可以通过 accept 属性来实现，如下：
<input type="file" accept="image/*">
这样就可以过滤掉非图片类型了。但是图片的类型可能也太多了， 有些可能服务器不支持，所以，如果想保守一些，只允许 jpg 和 png 类型，可以写成这样：
<input type="file" accept="image/jpg, image/jpeg, image/png"> 或者 <input type="file" accept=".jpg, .jpeg, .png">
预览图片
在远古时代，前端并没有预览图片的方法。当时的做法时，用户选择图片之后，立刻把图片上传到服务器，然后服务器返回远程图片的 url 给前端显示。这种方法略显麻烦，而且会浪费用户的流量，因为用户可能还没有确定要上传，你却已经上传了。幸好，远古时代已经离我们远去了，现代浏览器已经实现了前端预览图片的功能。常用的方法有两个，分别是 URL.createObjectURL() 和 FileReader 。虽然他们目前均处在 w3c 规范中的 Working Draft 阶段, 但是大多数的现代浏览器都已经良好的支持。本文只对URL.createObjectURL()用法小作介绍
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。用法用下
objectURL = URL.createObjectURL(object);
其中，object 参数指 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。对于我们的 input[type=file] 而言， input.files[0] 可以获取到当前选中文件的 File 对象。示例代码如下：
<body> <input type="file" accept="image/*" id="input"/> <br/> <!-- 显示图片 --> 图片<br/> <img src="" title="hahahah" alt="暂无" id="img" style=" 200px; height:200px;font-size: 12px;" /> <script> var img = document.getElementById('img') var input = document.getElementById('input') function handlerFileShow(e) { const { target: { files } } = e console.log(URL.createObjectURL(files[0])) img.src = files[0] ? URL.createObjectURL(files[0]) : "" } input.addEventListener('change', handlerFileShow, false) </script> </body>