Rumah > pembangunan bahagian belakang > tutorial php > javascript实现图片预览的两种方式

javascript实现图片预览的两种方式

陈政宽~
Lepaskan: 2023-03-11 21:22:01
asal
3858 orang telah melayarinya

这篇文章主要介绍了JS实现图片预览的两种方式,非常不错,具有参考借鉴价值,需要的朋友可以参考下

考虑到用户体验, 网页的图片上传数据库前,先预览是很有必要的一个步骤,第一可以给用户带来安全感,第二防止图片文件有问题而提交到数据库,占用存储资源。

那么要实现预览有两种方式:一种是用window.URL.createObjectURl方法对选择的图片数据(可以勉强理解为input的value)生成一个blob对象路径,第二种是用获取 FileReader读取器。

那么无论那种方法,首先都得得到文件数据,获得文件数据是从files集合中获取。

方式一:

代码如下:


<input type=file id="inp">
<script>
 inp.onchange=function(){
 var file=this.files[0] // 获取input上传的图片数据;
 var img=new Image() ;
 url=window.URL.createObjectURL(file) // 得到bolb对象路径,可当成普通的文件路径一样使用,赋值给src;
 img.src=url;
 //其实也可一句代码搞定,不需要声明那么多变量;img.scr=window.URL.cteateObejectURL(this.files[0]) ;
 然后把img添加到页面就实现预览了
 }
<script>
Salin selepas log masuk


方式二:

用FileRader对像读取文件.可分为四步;1、创建FileReader对像;2、调用readAsDataURL方法读取文件;3、调用onload事件监听,我们一需要拿到完整的数据,但我们又不知道文件何时读完?,所以需要第三步监听;4、通过FileRader对像r的result属性拿到读取结果。

代码如下:


<input type=file id="inp">
<input type=file id="inp">
<script>
inp.onchange=function(){
 var read=new FileReader() // 创建FileReader对像;
 read.readAsDataURL(this.files[0]) // 调用readAsDataURL方法读取文件;
  read.onload=function(){
   url=read.result // 拿到读取结果;
   var img=new Image();
   img.src=url;
   p.appendChild(img);
 }
 }
Salin selepas log masuk


以上所述是小编给大家介绍的JS实现图片预览的几种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

Atas ialah kandungan terperinci javascript实现图片预览的两种方式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan