美文网首页
图片加载预览js

图片加载预览js

作者: 曾祥辉 | 来源:发表于2018-02-07 14:21 被阅读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);  
    }  
    

    相关文章

      网友评论

          本文标题:图片加载预览js

          本文链接:https://www.haomeiwen.com/subject/sixsoxtx.html