input中图片实时预览功能

input中实现图片实时预览

方法一

1. 首先监听input的change事件，当发生改变时，改变图片
2. 得到input里的 files对象
3. 用到html5 URL.createObjectURL(files)
4. 最后赋值给图片src

var file = this.files[0];
var imgUrl = URL.createObjectURL(file);
$('#img').attr('src',imgUrl)

方法二

通过FileReader ,文件读取器，这个也是html5新增的一个方法

1. files:里面存储了所有上传的文件，这个data就是我们上传的那个文件
2. 让文件读取器读取整个文件
3. box 为img标签的父盒子

file.addEventListener("change", function () {
   
        var data = file.files[0]
        //1. 创建一个文件读取器
        var fr = new FileReader();

        //2. 让文件读取器读取整个文件
        fr.readAsDataURL(data);

        //3. 等待文件读取完
        //onload：文件读取完成后，就会触发
        fr.onload = function () {
            var img = document.createElement("img");
            img.src = fr.result;
            box.innerHTML = "";
            box.appendChild(img);
        }