立即登录 马上注册
首页 › 开发帮助文档 › 开发技术 › jq实现文件上传并预览

赞

评论

收藏

[jQuery] jq实现文件上传并预览

开发技术 开发技术 发布于：2021-07-05 17:36 | 阅读数：213 | 评论：0

　　HTML：
<body>
  <div id="box">
  <img id="imgshow" src="" alt=""/>
  </div>
  <div id="pox">
  <input id="filed" type="file" accept="image/*"/>
  </div>
</body>
　　JS:
<script>
  //在input file内容改变的时候触发事件
  $('#filed').change(function(){
  //获取input file的files文件数组;
  //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
  //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
    var file = $('#filed').get(0).files[0];
  //创建用来读取此文件的对象
    var reader = new FileReader();
  //使用该对象读取file文件
    reader.readAsDataURL(file);
  //读取文件成功后执行的方法函数
    reader.onload=function(e){
  //读取成功后返回的一个参数e，整个的一个进度事件
    console.log(e);
  //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
  //的base64编码格式的地址
    $('#imgshow').get(0).src = e.target.result;
    }
  })
</script>
　　
关注下面的标签，发现更多相似文章
免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群QQ好友和群 QQ空间QQ空间

举报

返回列表
相关帖子
avatar
1098 经验
1095 文档
OPNE在线字典
  • 手机版| 免责声明|
2021-2025  版权所有：CodeAE代码之家   
粤ICP备2023096576号-2