前端上传那些事

选择图片

　　选择图片有什么好讲的呢？不就一个 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>