inputFile上传图片并显示

---

---

input 上传图片 并将上传的图片加载显示

闲话不多说 直接撸代码

HTML部分

<img id="gzzImg" src="images/common/add.png" />
<input id="gzzIpt" class="fileIpt" type="file" onchange="loadImg()"/>

js部分

function loadImg(){
    //获取文件
    var file =document.getElementById("gzzIpt").files[0];

    //创建读取文件的对象
    var reader = new FileReader();

    //创建文件读取相关的变量
    var imgFile;

    //为文件读取成功设置事件
    reader.onload=function(e) {
//      alert('文件读取完成');
        imgFile = e.target.result;
        console.log(imgFile);
        $("#gzzImg").attr('src', imgFile);
    };

    //正式读取文件
    reader.readAsDataURL(file);
}