网页上传图片之前的预览

最新推荐文章于 2021-10-15 09:07:50 发布

tpc1990519

最新推荐文章于 2021-10-15 09:07:50 发布

阅读量309

点赞数

文章标签：图片预览图片上传预览图片

本文链接：https://blog.csdn.net/tpc1990519/article/details/50162095

版权

$("#image").change(function(){//绑定input选择事件
   var blob=new Blob(this.files,{"type":"image/jpg"});//创建blob对象,第一个参数是file input中的files数组对象,第二个参数是数据类型,可以百度mime类型
   var url=window.URL.createObjectURL(blob);//通过blob对象创建一个url对象,然后这个url对象就可以直接赋值给<img>的src属性了
   console.log(blob);
   console.log(window.URL.createObjectURL(blob));
   console.log(this.files[0]);
   $("#img1").prop("src",url);//给图片的src属性赋值
  });
});

</script>

</head>

<body>
<input id="image" type="file" value="选择图片">
<img id="img1" alt="展示图片1" src="" width="200px">//这儿设置了图片的宽度,如果不设置就会按照图片原本的大小来显示
<img id="img2" alt="展示图片2" src="" width="300px">
</body>
</html>

以上就是我的demo代码,

本来看到一个文件上传,然后看了半天没有看明白,于是一顿百度之,经过各种,终于发现了有一个Blob这个东西

参考文章:

http://blog.cncnc.com.cn/post/20100519925.html

http://www.cnblogs.com/jscode/archive/2013/04/27/3572239.html