图片加载预览js

2018-02-07  本文已影响0人  曾祥辉

//html

<form id="imgForm">  
    <input type="file" class="addBorder">  
    <br/>  
    <button type="button" onclick="loadImg()">获取图片</button>  
</form> 

//js

function loadImg(){  
    //获取文件  
    var file = $("#imgForm").find("input")[0].files[0];  
  
    //创建读取文件的对象  
    var reader = new FileReader();  
  
    //创建文件读取相关的变量  
    var imgFile;  
  
    //为文件读取成功设置事件  
    reader.onload=function(e) {  
        alert('文件读取完成');  
        imgFile = e.target.result;  
        console.log(imgFile);  
        $("#imgContent").attr('src', imgFile);  
    };  
  
    //正式读取文件  
    reader.readAsDataURL(file);  
}  
上一篇下一篇

猜你喜欢

热点阅读