通过AJAX实现用户上传图片时在网页上实时预览本地图

场景：

用户提交数据时上传图片，预览在网页上（还未传至服务器）

原理：

用上传文件的File对象创建一个url路径，赋值给img的src属性

注意：

1. 这个url路径在窗口关掉后失效
2. 这是一个试验中的功能，IE10以下不支持，具体详见MDN文档

步骤1：

在HTML中，在input前面或后面写一个src为空的<img>用来放预览图

<input type=”file”>
<img src=”” alt=””>

步骤2：

在JS中，创建事件源为input[type=’file’]的onchange事件

说明：

一旦选择（变更）了本地上传的图片文件，则触发此事件，让浏览器将本地图片读取到页面上，实现图片预览。

document.querySelect(‘’input[type=file]”).onchange=function(){
}

步骤3：

写事件，为对象创建路径并赋值

说明：

1. 这个函数（window的方法）创建出路径，浏览器能通过原生接口访问本地文件的路径，其中window可以省略，参数为需要创建路径的dom元素。
   objectURL=window.URL.creatObjectURL(file或blob)
2. input[type=’file’]选择文件后会返回一个File对象，为this.files[0]；
3. 将这个对象作为参数传入创建路径的函数中；
4. 路径创建为 imgUrl = URL.ObjectURL(this.files[0])；
5. 赋值给图片的src

document.querySelector('input[type=file]').onchange=function(){
  var imgUrl = URL.createObjectURL(this.files[0]);
  document.querySelector('img').src = imgUrl ;
}

注意：

传入的参数应为dom元素。所以在jQuery中书写时，也用this即可，不要用$(this)。
this是DOM，$(this)是jQuery对象。

---

2018.1.4