上传一张图片然后把他显示在下方(fileReader):

上传一张图片然后把他显示在下方
在这里插入图片描述
上传以后
在这里插入图片描述

<label for="" style="padding-bottom: 5px;">上传图片</label>
<span class="btn btn-default fileinput-button" style=" width: 100%;">
     <span class="glyphicon glyphicon-plus"></span>
     <input type="file" id="commentImage" name="commentImage" style="margin-left: 15px;" accept="image/*;">
 </span>
$("#commentImage").change(function() {
   var fileReader = new FileReader();//读取图片的操作 
        //FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件
    fileReader.onload = function(e) {
        $("#previewImage").append("<image class='img-thumbnail' style='max-width:100%;height:auto;' src="+e.target.result+"/>");
    };
    var imageFile = this.files[0];
    fileReader.readAsDataURL(imageFile);//读取图片的内容生成的base64编码的图
        //读取完成后,执行该回调函数,它会返回读取的结果result	
});

如何设置断点调试?
ready什么时候执行?
change什么时候执行?上传了图片事件就触发
onload什么时候执行?把图片读进来(byte字节一样的东西)之后才会把上传好的图片显示出来,先执行readAsDataURL再onload.
files[0] 返回的是一个数组,取上传图片里面的第一张。
this 指commentImage这个dom元素。事件监听dom元素的改变
append在input后面显示图片。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值