ajax上传图片之预览图片

预览将要上传的图片

如果说ajax优化了用户的操作，那么预览将要上传的图片就是极致的用户体验。

那么要预览图片，要用到什么技术呢？那就是FileReader这个对象了。

FileReader是什么？

定义:

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。 --引自MDN

其中File对象可以是来自用户在一个 <input> 元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

如何使用

首先要new一个FileReader对象获得到他的实例，然后使用这个实例的readAsDataURL(File)方法去获取File的内容，最后加载完成后FileReader会返回一个result属性，属性中就是读取到的那个文件内容。

代码

// html

<input type="file" name="img" onchange('viewImg(this)') />

<div>
        //展示图片
</div>

// js

function viewImg(elem){
        // 先判断一个elem的文件是否是正确的格式
        var files = elem.files;
        
        if( files && files[0] && isImg(files[0].type) ){
                // 格式正确进入
                // 创建一个FileReader实例
                var fileReader = new FileReader();
                // 加载file的文件
                fileReader.readAsDataURL(files[0]);

                // 监听加载完成
                fileReader.onload = function(){
                        // result就是FileReader得到的数据内容
                        $('div').html(`<img src="${this.result}">`);
                }
        }

        
function isImg(type){
       var types = ['image/png', 'image/jpg', 'image/jpeg'];
            if( types.indexOf(type) != -1 ){
                return true;
            }
            return false;
        }
}

这样就完成图片的预览。