JavaScript实现本map片下传预览功能（兼容IE、chrome、FF）

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

摘要本人个人nodejs分享论坛：tnodejs.com参考：http://blog.csdn.net/nhconch/article/details/7295456需要解决的问题有：本地图片如何在上传前预览、编辑；
最近发现这个功能很多是基于flash实现的，很多JavaScript实现的代码兼容性都很差，特别是在IE和firefox和chrome三个浏览器上不兼容。
代码实现主要利用到jquery插件imgAreaSelect，FileReader对象（chrome和ff获取本地图片数据的接口），IE滤镜效果。

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

一、实现上传前预览
1.1、页面显示
代码1-1显示的是html需要展示的web页面信息
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和idelse{//创建需要滤镜显示的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访问

代码下载

1楼lidaasky昨天 22:40

学习了