首页 > 其他 > 详细

选择图片,获取图片

时间:2019-07-22 09:56:29      阅读:58      评论:0      收藏:0      [点我收藏+]
<form id="imgForm">
    <input type="file" class="addBorder"  onchange="loadImg()">
    <br/>
    <button type="button" onclick="loadImg()">获取图片</button>
</form>

<div class="addBorder" id="imgDiv">
    <img id="imgContent">

</div>
  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);
    }
  .addBorder{
            border:1px solid #ccc;
        }

        #imgDiv{
            width:100px;
            height:100px;
        }

        #imgContent{
            width: 100%;
            height:100%;
        }

 https://blog.csdn.net/fd214333890/article/details/71250488    转载自这里

选择图片,获取图片

原文:https://www.cnblogs.com/qianyuhebaobao/p/11223758.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!