js图片预览功能

 <input type="file"  id="file">
 <img  src="" id="fileImg">
              

 $('#file').change(function () {
        //    创建文件读取对象
        var reader = new FileReader();
        //    读取文件
        reader.readAsDataURL(this.files[0]);
        //    监听onload事件 加载img数据
        reader.onload = function () {
            $('#fileImg').prop('src',reader.result);
        }

    })

FileReader：读取文件内容

readerAsText()：读取文本文件（可以使用txt打开的文件），返回文本字符串，默认编码是UTF-8
readAsBinaryString()：读取任意类型的文件，返回二进制字符串。这个方法不是用来读取文件展示给客户看，而是储存文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据储存
readAsDataURL()：读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL，DataURL是一种将文件（这个文件一般是指图像或者能够嵌入到文档的文件格式）嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接储存在url中 >> 优化网站的加载速度和执行效率
src：指定路径（资源定位–url）：src请求的是外部文件，一般来说是服务器资源。意味着它需要向服务器发送请求，占用服务器资源，所以可以用 DataURL 优化
<img src="../images/beauty.jpg" alt="">
abort()：中断读取