图片加载预览js

//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);  
}  
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容