chrome和IE的javascript图片预览实现代码,用js实现预
分类:计算机网络

javascript实现客户端file选择文件后img标签加载客户端图片实现图片预览。

一、实现图片预览的一些方法。

兼容最新firefox、chrome和IE的javascript图片预览实现代码,chrome图片预览

javascript实现客户端file选择文件后img标签加载客户端图片实现图片预览。

测试浏览器:firefox6,firefox12,chrome 25.0.1364.172 m,IE6-IE10 都兼容

safari5.0.4不支持FileReader和file.files.item(0).getAsDataURL方法,暂时无解,需要上传到服务器后返回临时文件名用img标签加载,不知道后续的safari版本是否支持FileReader对象。

IE10下效果:

图片 1

IE9下效果:

图片 2

实现源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="txt/html;charset=utf-8" />
<title>javascript实现IE,firefox客户端图片预览</title>
<script>
 //使用IE条件注释来判断是否IE6,通过判断userAgent不一定准确
 if (document.all) document.write('<!--[if lte IE 6]><script type="text/javascript">window.ie6= true</script><![endif]-->');
 // var ie6 = /msie 6/i.test(navigator.userAgent);//不推荐,有些系统的ie6 userAgent会是IE7或者IE8
 function change(picId,fileId) {
  var pic = document.getElementById(picId);
  var file = document.getElementById(fileId);
  if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9,IE9也可以用滤镜来实现
   oFReader = new FileReader();
   oFReader.readAsDataURL(file.files[0]);
   oFReader.onload = function (oFREvent) {pic.src = oFREvent.target.result;};  
  }
  else if (document.all) {//IE8-
   file.select();
   var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
   if (window.ie6) pic.src = reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片
   else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现,IE10浏览器不支持滤镜,需要用FileReader来实现,所以注意判断FileReader先
    pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src="" + reallocalpath + "")";
    pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';//设置img的src为base64编码的透明图片,要不会显示红xx
   }
  }
  else if (file.files) {//firefox6-
   if (file.files.item(0)) {
    url = file.files.item(0).getAsDataURL();
    pic.src = url;
   }
  }
 }
</script>
</head>
<body>
<form name="form1" enctype="multipart/form-data"><table><tr>
<td> 草图1:</td>
<td >
<input type="file" name="file1" id="file1" onchange="change('pic1','file1')">
</td>
<tr>
<td>草图浏览1:</td>
<td>
<img src="images/px.gif" id="pic1" >
</td></tr><tr>
<td> 草图2:</td>
<td >
<input type="file" name="file2" id="file2" onchange="change('pic2','file2')">
</td>
<tr>
<td>草图浏览2:</td>
<td>
<img src="images/px.gif" id="pic2" >
</td></tr>
</table>
</form>
</body>
</html>

<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5" onchange="preview5()"/>
</form>
<script type="text/javascript">
function preview5(){
var x = document.getElementById("file5");
 if(!x || !x.value) return;
var patn = /.jpg$|.jpeg$|.gif$/i;
if(patn.test(x.value)){ 
var y = document.getElementById("img5");
if(y){
y.src = "file://localhost/" + x.value;
}else{
var img=document.createElement("img");      img.setAttribute("src","file://localhost/"+x.value);
img.setAttribute("width","120");
img.setAttribute("height","90");
img.setAttribute("id","img5");
document.getElementById("form5").appendChild(img);
 }
}else{
alert("您选择的似乎不是图像文件。");
}}
</script> 

测试浏览器:firefox6,firefox12,chrome 25.0.1364.172 m,IE6-IE10 都兼容

了解了一下,其实方法都是大同小异的。大概有以下几种方式:

小弟有一个firefox兼容性的js问题,在chrome与ie里面可以正常显示,但在firefox里面就不可以正常显示

看下,貌似直接给事件方法,FF是不支持的,必须使用注册监听的方式。你可以参考一下《JAVASCRIPT权威指南》的关于事件注册的章节,写的很清楚  

您可能感兴趣的文章:

  • JS预览图像将本地图片显示到浏览器上
  • Javascript图片上传前的本地预览实例
  • javascript IE7 浏览器本地图片预览
  • 在页面预览客户端本地图片的js代码(兼容FF IE)
  • javascript firefox不显示本地预览图片问题的解决方法
  • 纯JS实现本地图片预览的方法
  • js本地图片预览实现代码
  • 详解nodejs实现本地上传图片并预览功能(express4.0+)
  • 基于JavaScript实现本地图片预览
  • 原生js FileReader对象实现图片上传本地预览效果
  • JavaScript实现图片本地预览功能【不用上传至服务器】

safari5.0.4不支持FileReader和file.files.item(0).getAsDataURL方法,暂时无解,需要上传到服务器后返回临时文件名用img标签加载,不知道后续的safari版本是否支持FileReader对象。

①订阅input[type=file]元素的onchange事件.

兼容IE、Google chrome、FireFox的限制上传图片大小的js函数

IE和火狐有许多内置方法不兼容的,比如document.body.clientHeight 这段代码在火狐中可能不支持。如果你的程序需要兼容IE和火狐的话,就需要在代码里判断IE还是火狐然后在执行各自支持的代码

 

javascript实现客户端file选择文件后img标签加载客户端图片实现图片预览...

IE10下效果:

一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上。

图片 3

缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会把上传过程中选择过的图片都保存至服务器端,会造成资源浪费,而且服务器端清理临时的那些预览图片也需要一定的工作量。

IE9下效果:

②利用HTML5的新特性FileReader。

图片 4

这个对象提供了很多相关的方法,其中最主要用到readAsDataURL这个方法。点我了解更多。

实现源代码:

缺点:通过FileReader的readAsDataURL方法获取的Data URI Scheme会生成一串很长的base64字符串,若图片较大那么字符串则更长,若页面出现reflow时则会导致性能下降。且浏览器支持情况不一致,支持的浏览器:FF3.6+,Chrome7+,IE10+。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="txt/html;charset=utf-8" />
<title>javascript实现IE,firefox客户端图片预览</title>
<script>
 //使用IE条件注释来判断是否IE6,通过判断userAgent不一定准确
 if (document.all) document.write('<!--[if lte IE 6]><script type="text/javascript">window.ie6= true</script><![endif]-->');
 // var ie6 = /msie 6/i.test(navigator.userAgent);//不推荐,有些系统的ie6 userAgent会是IE7或者IE8
 function change(picId,fileId) {
  var pic = document.getElementById(picId);
  var file = document.getElementById(fileId);
  if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9,IE9也可以用滤镜来实现
   oFReader = new FileReader();
   oFReader.readAsDataURL(file.files[0]);
   oFReader.onload = function (oFREvent) {pic.src = oFREvent.target.result;};  
  }
  else if (document.all) {//IE8-
   file.select();
   var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
   if (window.ie6) pic.src = reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片
   else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现,IE10浏览器不支持滤镜,需要用FileReader来实现,所以注意判断FileReader先
    pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src="" + reallocalpath + "")";
    pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';//设置img的src为base64编码的透明图片,要不会显示红xx
   }
  }
  else if (file.files) {//firefox6-
   if (file.files.item(0)) {
    url = file.files.item(0).getAsDataURL();
    pic.src = url;
   }
  }
 }
</script>
</head>
<body>
<form name="form1" enctype="multipart/form-data"><table><tr>
<td> 草图1:</td>
<td >
<input type="file" name="file1" id="file1" onchange="change('pic1','file1')">
</td>
<tr>
<td>草图浏览1:</td>
<td>
<img src="images/px.gif" id="pic1" >
</td></tr><tr>
<td> 草图2:</td>
<td >
<input type="file" name="file2" id="file2" onchange="change('pic2','file2')">
</td>
<tr>
<td>草图浏览2:</td>
<td>
<img src="images/px.gif" id="pic2" >
</td></tr>
</table>
</form>
</body>
</html>

③使用window.URL.createObjectURL代替FileReader,再用DXImageTransform.Microsoft.AlphaImageLoader滤镜兼容IE。

您可能感兴趣的文章:

  • 手机图片预览插件photoswipe.js使用总结
  • JS上传图片预览插件制作(兼容到IE6)
  • 上传图片预览JS脚本 Input file图片预览的实现示例
  • js实现上传图片预览的方法
  • javascript IE7 浏览器本地图片预览
  • 纯JS实现的批量图片预览加载功能
  • 轻松实现js图片预览功能
  • javascript实现input file上传图片预览效果
  • 纯JS实现本地图片预览的方法
  • JS上传图片前实现图片预览效果的方法
  • Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
  • jcarousellite.js 基于Jquery的图片无缝滚动插件
  • JS实现的图片预览插件与用法示例【不上传图片】

缺点:由于IE11作了安全方面的考虑,使得在input[type=file]元素上通过value、outerHTML和getAttribute的方式都无法获取用户所选文件的真实地址,只能获取到

D:frontEnd文件名称。因此需使用document.selection.createRangeCollection方法来获取真实地址。

二、我的插件制作

我选择了比较保守的方法,就是第三种使用window.URL.createObjectURL代替FileReader,再用DXImageTransform.Microsoft.AlphaImageLoader滤镜兼容IE的方法啦。

①第一步,HTML的布局

<div id="pic">
<img id="preview" src="../imgs/default.jpeg">
</div>
<input type="file" id="uploadBtn" accept="image/*" onchange="setPreviewPic()">

是不是想说so easy?

②第二步,插件js封装。

1、建立对象

我主要采用了组合继承的方式,封装了两个方法,分别是单张图片上传和多张图片上传。因为无论是单张图片上传还是单张图片上传,都需要传入、上传图片的input按钮、img标签、包裹着img的div、最大的单张照片的值,单位为KB。所以这四个参数在创建上传图片对象的时候就要传入。创建该对象的方法如下:

var SetPreviewPic=function(fileObj,preview,picWrap,maxImgSize){
this.fileObj=fileObj;
this.preview=preview;
this.picWrap=picWrap;
this.maxImgSize=maxImgSize;
}

2、定义匹配模式

因为是上传图片,除了在input里面加了accept="image/*",做了初步限制之外,还需要一个js的正则来通过路径的检测来判定是否为图片。所以在prototype上面定义该模式以供两个方法使用:

SetPreviewPic.prototype.pattern=new RegExp('.(jpg|png|jpeg)+$','i');

3、定义方法

主要就是判断是否低于IE11的环境,编写两类方案。第一种就是直接通过改变img的src来预览图片,第二种就是在低版本的IE下,通过滤镜来达到预览效果。

FF、Chrome、IE11以上:(这里贴出多张图片预览的代码)

 if(maxPics){ <br> if(this.fileObj.files && this.fileObj.files[0]){
var imgs=this.picWrap.querySelectorAll('img'); //查找DOM里面已经有多少张图片了
var num=imgs.length;
var html=this.picWrap.innerHTML;
if(Number(num)<Number(maxPics)){ //判断是否超过最大上传限度
if(num==1&&(!imgs[0].classList.contains('newLoad'))){ //覆盖第一张默认图片
html='';
}
if(this.pattern.test(fileObj.files[0].name)){
if(judgeSize(fileObj.files[0].size/1024,this.maxImgSize)){//判断图片的大小是否超限
html='<img class="newLoad" style="margin:5px;width:'+width+'px;height:'+height+'px;" src='+window.URL.createObjectURL(this.fileObj.files[0])+' />'+html;
this.picWrap.innerHTML=html;
}else{
alert('你上传的图片太大!');
}
}else{
alert('你上传的好像不是图片哦,请检查!');
}
}else{
alert('每次最多上传'+maxPics+'张图片!');
}
}

IE11下利用滤镜达到效果:

var nums=this.picWrap.childNodes.length;//因为IE6以下不支持querySelectorAll等方法,就通过childNodes的长度判断
if(nums<maxPics+2){//这里加2是因为本来有一张默认的图片,而且childNodes读出来的长度会多1
this.fileObj.select();
if(document.selection){
var imgSrc=document.selection.createRange().text;
var image=new Image(); 
image.src=imgSrc; 
filesize=image.fileSize; 
if(judgeSize(image.fileSize/1024,this.maxImgSize)){
//IE下必须设置div的大小
var ele=document.createElement('div');
ele.style.width=width+'px';
ele.style.height=height+'px';
ele.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+imgSrc+"')";
try{
this.picWrap.appendChild(ele);
}catch(e){
alert('你上传的图片格式有误,请重新选择!');
return false;
}
this.preview.style.display='none';
document.selection.empty();
}else{
alert('你上传的图片太大!');
}
}

至此,就完成啦!

用法:

<script type="text/javascript" src="../js/singlePic.js"></script>
<script>
var fileObj=document.getElementById('uploadBtn');
var preview=document.getElementById('preview');
var picWrap=document.getElementById('pic');
fileObj.onchange=function(){
var obj=new SetPreviewPic(fileObj,preview,picWrap,100);
//定义上传图片对象,参数分别为上传图片的input按钮、img标签包、裹着img的div、最大的单张照片的值,单位为KB
obj.uploadSinglePic(200,250);//单张图片上传,参数分别为每张的宽度、高度
// obj.uploadPics(200,250,2); //多张图片上传,参数分别为每张的宽度、高度、最多上传张数
}
</script>

以上所述是小编给大家介绍的JS上传图片预览插件制作(兼容到IE6)的相关知识,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

您可能感兴趣的文章:

  • 手机图片预览插件photoswipe.js使用总结
  • 上传图片预览JS脚本 Input file图片预览的实现示例
  • js实现上传图片预览的方法
  • javascript IE7 浏览器本地图片预览
  • 纯JS实现的批量图片预览加载功能
  • 兼容最新firefox、chrome和IE的javascript图片预览实现代码
  • 轻松实现js图片预览功能
  • javascript实现input file上传图片预览效果
  • 纯JS实现本地图片预览的方法
  • JS上传图片前实现图片预览效果的方法
  • Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
  • jcarousellite.js 基于Jquery的图片无缝滚动插件
  • JS实现的图片预览插件与用法示例【不上传图片】

本文由美高梅网址发布于计算机网络,转载请注明出处:chrome和IE的javascript图片预览实现代码,用js实现预

上一篇:net页面刷新有问题,动态输出跳转 下一篇:jQuery实现的一个tab切换效果内部还嵌有切换,c
猜你喜欢
热门排行
精彩图文