需要解决的问题有：本地图片如何在上传前预览、编辑；

近发现这个功能很多是基于flash实现的，很多java script实现的代码兼容性都很差，特别是在IE和firefox和chrome三个浏览器上不兼容。

代码实现主要利用到jquery插件imgAreaSelect，FileReader对象（chrome和ff获取本地图片数据的接口），IE滤镜效果。

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

一、实现上传前预览

1.1、页面显示

代码1-1显示的是html需要展示的web页面信息

[html] view plaincopyprint?

<!—预览图片显示区域-->

<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="java script:void(0);"class="button"> 上传照片</a>

<input type='text'name="path" readonly>

<div id = “submit_button”>

<a href="java script:void(0);"class='button'>确认</a>

</div>

代码1-1

为了修改input file的按钮名称，我们添加了一段代码，这个在第二节将会详细说明

[html] view plaincopyprint?

<a href="java script:void(0);" class="button">上传照片</a>

<input type='text'name="path" readonly>

1.2、实现预览在线编辑

这里我们主要使用了一个插件进行图片编辑，如果需要具体查看学习可查看网址

//odyniec.net/projects/imgareaselect/，使用方法还是很简单方便的。

[java script] view plaincopyprint?

$('#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//www.heatpress123.net

代码1-2主要是设置需要编辑图片的一些插件属性，具体查看插件的参量说明。

先我们需要创建一个预览小图片在img之后

[java script] view plaincopyprint?

$('<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、实现在线预览功能

[java script] view plaincopyprint?

function previewImage(file)

{

var porImg = $('#biuuu'),//先获取大图片jquery对象

viewImg = $('#view');//小图片jquery对象

//判断该浏览器是否为w3c标准，既非IE浏览器

if (file["files"] && file["files"][0])

{

//使用java script的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(e

nabled='true',sizingMethod='scale',src=\""+ path + "\")"});

Loader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});

// .style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='tru

e',sizingMethod='scale',src=\""+ path + "\")";//使用滤镜效果

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

要注意，代码必须要使用客户端访问，例如：//loacalhost/imgpreview/index.html，

不要直接点击index.html访问

看过该Java开发的还看过

• JavaScript 中的时间对象是什么？
• JavaScript中的函数then()是什么意思？
• Json数据怎样转换成Javascript对象
• 武汉学PS哪家好?来北大青鸟_从入门到精通
• javascript基础教程：来了解下javascript的对象

本文标题：JavaScript实现图片在线编辑以及上传预览，责任编辑：宏鹏，来源：武汉北大青鸟鲁广校区栏目，于2012-12-09 10:00:15发布于北大青鸟鲁广校区。JavaScript实现图片在线编辑以及上传预览。