指引网

当前位置: 主页 > 网页制作 > JavaScript >

js实现本地图片预览

来源:网络 作者:佚名 点击: 时间:2017-08-07 22:16
[摘要] 使用input file上传图片的时候无法预览图片,今天分享一个函数,在上传图片的时候,可以在本地预览图片,这样用户体验非常的好。使用代码...
使用input file上传图片的时候无法预览图片,今天分享一个函数,在上传图片的时候,可以在本地预览图片,这样用户体验非常的好。

js实现本地图片预览

使用代码如下:

  1. $('input[nc_type="change_store_datu"]').change(function(){ 
  2.         var src = getFullPath($(this)[0]); 
  3.         $('div[nctype="store_datu"]').find('p').html('<img src="'+src+'" width="100%">'); 
  4.     }); 

在图片选中确定时候,调用getFullPath函数,获取本地全路径


  1. /* 取本地全路径www.bcty365.com */ 
  2. function getFullPath(obj) 
  3.     if(obj) 
  4.     { 
  5.         //ie 
  6.         if (window.navigator.userAgent.indexOf("MSIE")>=1) 
  7.         { 
  8.             obj.select(); 
  9.             if(window.navigator.userAgent.indexOf("MSIE") == 25){ 
  10.                 obj.blur(); 
  11.             } 
  12.             return document.selection.createRange().text; 
  13.         } 
  14.         //firefox 
  15.         else if(window.navigator.userAgent.indexOf("Firefox")>=1) 
  16.         { 
  17.             if(obj.files) 
  18.             { 
  19.                 //return obj.files.item(0).getAsDataURL(); 
  20.                 return window.URL.createObjectURL(obj.files.item(0)); 
  21.             } 
  22.             return obj.value; 
  23.         } 
  24.         return obj.value; 
  25.     } 

 

------分隔线----------------------------