inputFile上传图片并显示

发表于 | 分类于 | | 阅读次数:
字数统计: 137 | 阅读时长 ≈ 1

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

闲话不多说 直接撸代码

HTML部分

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

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);
}

-------------本文结束感谢您的阅读-------------
坚持原创技术分享，您的支持将鼓励我继续创作！