html5本地图片预览

1、文件控件中又一个files属性,其中保存了上传文件的各种属性,它是一个伪数组形式,可以上传保存1个文件或多个文件

2、对于这些文件信息（本例中的文件就是用户选中的图片），我们通过window.URL.createObjectURL()来创建一个临时的路径，这个路径可能是像这样：

blob:http://localhost:3005/fc517910-1300-44f3-a6e8-d52f56f34e4e

3、你可以通过打一个新的浏览器窗口，并在地址栏中输入这个路径来访问这张图片。注意，它只是临时的，如果你关闭了选中图片的网页，这张图片也将会不可访问。
现在，我们拿到这个临时的url赋值给某一个img标签的src即可。

具体的代码如下:

// input_avatar就是file控件的内容发生变化执行
$('#input_avatar').change(function () {
    // console.log('xxx');
    // 如果没有选择文件，返回
    if (!this.files[0]) return;

    var url = URL.createObjectURL(this.files[0]);
   
    // 设置图片的src
    $('#avatar').attr('src', url);
});