码迷,mamicode.com
首页 > 其他好文 > 详细

使用input选择本地图片,并且实现预览功能

时间:2018-10-10 14:28:19      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:com   mozilla   信息   img   tps   ocs   rip   创建   script   

1、使用input标签选择本地图片文件

技术分享图片

用一个盒子来存放预览的图片

技术分享图片

 

2、JS实现预览

  首先添加一个input change事件,再用到 URL.createObjectURL() 方法 用来创建 URL 的 File 对象或者 Blob 对象?

技术分享图片

 这时候就能可以选择图片然后在你预备的盒子里看见你选择的图片,图片的路径src是一个blob链接

技术分享图片

 

使用input选择本地图片,并且实现预览功能

标签:com   mozilla   信息   img   tps   ocs   rip   创建   script   

原文地址:https://www.cnblogs.com/xxflz/p/9765619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!