JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

jopen 7年前

需要解决的问题有:本地图片如何在上传前预览、编辑;
最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼容。
代码实现主要利用到jquery插件imgAreaSelect,FileReader对象(chrome和ff获取本地图片数据的接口),IE滤镜效果。

关键词:imgAreaSelect FileReaderdocument.selection.createRange() IE滤镜效果

一、实现上传前预览
1.1、页面显示

代码1-1显示的是html需要展示的web页面信息
<!—预览图片显示区域-->  <div id=”image_area”>  <img id="biuuu"src="#" title="biuuu">  </div>  <!—图片上传区域-->  <div id =”upload_area”>  <form name = "form1"action =' /person?c=changeAtvatar' enctype = 'multipart/form-data' method = 'POST'>  <input type="file"id="picpath" name="atvatar_image">  <a href="javascript:void(0);"class="button"> 上传照片</a>  <input type='text'name="path" readonly>  <div id = “submit_button”>  <a href="javascript:void(0);"class='button'>确认</a>  </div>
代码1-1
为了修改input file的按钮名称,我们添加了一段代码,这个在第二节将会详细说明
<a href="javascript:void(0);" class="button">上传照片</a>  <input type='text'name="path" readonly>
1.2、实现预览在线编辑
这里我们主要使用了一个插件进行图片编辑,如果需要具体查看学习可查看网址
http://odyniec.net/projects/imgareaselect/,使用方法还是很简单方便的。
$('#biuuu').imgAreaSelect({  aspectRatio:'1:1', //截取比例  show:true,  resizable:true, //是否可调整大小  autoHide: false,//选择框选择完毕是否自己取消  handles:true,  key:true, //是否启用键盘,默认为false  //x1: 75, y1: 30, x2:225, y2: 180, //需要处理的区域,原始的  //x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标  keys: { arrows: 1,ctrl: 5, shift: 'resize' }, //调整像素大小  //onInit:function(img, selection) { ias.setSelection(100, 50, 250, 150, true);ias.update(); }, //设置初始函数 画出选择框  onSelectChange:preview //选框移动时触发的事件  //onSelectEnd:function(img, select){alert(select.width)} //选框结束时触发的事件  });
代码1-2
代码1-2主要是设置需要编辑图片的一些插件属性,具体查看插件的参量说明。
首先我们需要创建一个预览小图片在img之后
$('<div><imgid="view" src='+atvatarUrl+' style="position: relative;"/></div>')  .css({  float: 'left',  position:'relative',  overflow:'hidden',  width: '100px',  height: '100px'  }).insertAfter('#biuuu');//把新建元素放到 #biuuu 之后
代码1-3

代码1-3是创建一个小预览图片在img之后

1.3、实现在线预览功能

function previewImage(file)  {  var porImg = $('#biuuu'),//首先获取大图片jquery对象  viewImg = $('#view');//小图片jquery对象  //判断该浏览器是否为w3c标准,既非IE浏览器   if (file["files"] && file["files"][0])  {  //使用JavaScript的FileReader对象来读取本地数据,并且将数据结果赋值给image的src,具体该对象如何实现的还未深入研究  var reader = newFileReader();  reader.onload =function(evt){  porImg.attr({src :evt.target.result});  viewImg.attr({src: evt.target.result});  }  reader.readAsDataURL(file.files[0]);  }    function previewImage(file)  {  var porImg = $('#biuuu'),//首先获取大图片jquery对象  viewImg = $('#view');//小图片jquery对象  //判断该浏览器是否为w3c标准,既非IE浏览器   if (file["files"] && file["files"][0])  {  //使用JavaScript的FileReader对象来读取本地数据,并且将数据结果赋值给image的src,具体该对象如何实现的还未深入研究  var reader = newFileReader();  reader.onload =function(evt){  porImg.attr({src :evt.target.result});  viewImg.attr({src: evt.target.result});  }  reader.readAsDataURL(file.files[0]);  }  //如果是IE浏览器,采用滤镜效果,进行显示,但特别注意的是该滤镜效果使用的对象是div对象,并非img对象,因此我们需要将原有的img对象remove同时生成新的div对象,并且赋值相应的class和id  else  {  //创建需要滤镜显示的div的dom对象  var ieImageDom =document.createElement("div");  var proIeImageDom =document.createElement("div");  //设置对象的css属性和原有的img对象属性相同,添加相应的id属性值  $(ieImageDom).css({  float: 'left',  position:'relative',  overflow:'hidden',  width: '100px',  height: '100px'  }).attr({"id":"view"});  $(proIeImageDom).attr({"id":"biuuu"});  //删除原有img对象,append创建div的dom对象  porImg.parent().prepend(proIeImageDom);  porImg.remove();  viewImg.parent().append(ieImageDom);  viewImg.remove();  //采用滤镜效果生成图片预览  file.select();  path =document.selection.createRange().text;  $(ieImageDom).css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});  $(proIeImageDom).css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});  // .style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")";//使用滤镜效果  }


这样就可以实现一个图片的在线编辑以及上传在预览功能。

要注意,代码必须要使用客户端访问,例如:http://loacalhost/imgpreview/index.html,不要直接点击index.html访问

代码下载

转自:http://blog.csdn.net/danhuang2012/article/details/7703606