需要解决的问题有：本地图片如何在上传前预览、编辑；
最近发现这个功能很多是基于flash实现的，很多JavaScript实现的代码兼容性都很差，特别是在IE和firefox和chrome三个浏览器上不兼容。
代码实现主要利用到jquery插件imgAreaSelect，FileReader对象（chrome和ff获取本地图片数据的接口），IE滤镜效果。
关键词：imgAreaSelect FileReaderdocument.selection.createRange() IE滤镜效果
一、实现上传前预览
1.1、页面显示
代码1-1显示的是html需要展示的web页面信息
01 |
<!—预览图片显示区域--> |
02 |
<div id=”image_area”>
|
03 |
<img id="biuuu"src="#" title="biuuu">
|
04 |
</div>
|
05 |
<!—图片上传区域--> |
06 |
<div id =”upload_area”>
|
07 |
<form name = "form1"action =' /person?c=changeAtvatar' enctype = 'multipart/form-data'method = 'POST'>
|
08 |
<input type="file"id="picpath" name="atvatar_image">
|
09 |
<a href="javascript:void(0);"class="button"> 上传照片</a>
|
10 |
<input type='text'name="path" readonly>
|
11 |
<div id = “submit_button”>
|
12 |
<a href="javascript:void(0);"class='button'>确认</a>
|
13 |
</div>
|
代码1-1
为了修改input file的按钮名称，我们添加了一段代码，这个在第二节将会详细说明
1 |
<a href="javascript:void(0);" class="button">上传照片</a>
|
2 |
<input type='text'name="path" readonly>
|
1.2、实现预览在线编辑
这里我们主要使用了一个插件进行图片编辑，如果需要具体查看学习可查看网址
http://odyniec.net/projects/imgareaselect/，使用方法还是很简单方便的。
01 |
$('#biuuu').imgAreaSelect({
|
02 |
aspectRatio:'1:1', //截取比例
|
03 |
show:true,
|
04 |
resizable:true, //是否可调整大小
|
05 |
autoHide: false,//选择框选择完毕是否自己取消
|
06 |
handles:true,
|
07 |
key:true, //是否启用键盘，默认为false
|
08 |
//x1: 75, y1: 30, x2:225, y2: 180, //需要处理的区域，原始的 |
09 |
//x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标 |
10 |
keys: { arrows: 1,ctrl: 5, shift: 'resize' }, //调整像素大小
|
11 |
//onInit:function(img, selection) { ias.setSelection(100, 50, 250, 150, true);ias.update(); }, //设置初始函数 画出选择框 |
12 |
onSelectChange:preview //选框移动时触发的事件
|
13 |
//onSelectEnd:function(img, select){alert(select.width)} //选框结束时触发的事件 |
14 |
}); |
代码1-2
代码1-2主要是设置需要编辑图片的一些插件属性，具体查看插件的参量说明。
首先我们需要创建一个预览小图片在img之后
1 |
$('<div><imgid="view" src='+atvatarUrl+' style="position: relative;"/></div>')
|
2 |
.css({ |
3 |
float: 'left',
|
4 |
position:'relative',
|
5 |
overflow:'hidden',
|
6 |
width: '100px',
|
7 |
height: '100px'
|
8 |
}).insertAfter('#biuuu');//把新建元素放到 #biuuu 之后
|
代码1-3
代码1-3是创建一个小预览图片在img之后
1.3、实现在线预览功能
01 |
function previewImage(file)
|
02 |
{ |
03 |
var porImg = $('#biuuu'),//首先获取大图片jquery对象
|
04 |
viewImg = $('#view');//小图片jquery对象
|
05 |
//判断该浏览器是否为w3c标准，既非IE浏览器 |
06 |
if (file["files"] && file["files"][0])
|
07 |
{ |
08 |
//使用JavaScript的FileReader对象来读取本地数据，并且将数据结果赋值给image的src，具体该对象如何实现的还未深入研究 |
09 |
var reader = newFileReader();
|
10 |
reader.onload =function(evt){
|
11 |
porImg.attr({src :evt.target.result}); |
12 |
viewImg.attr({src: evt.target.result}); |
13 |
} |
14 |
reader.readAsDataURL(file.files[0]); |
15 |
} |
16 |
17 |
function previewImage(file)
|
18 |
{ |
19 |
var porImg = $('#biuuu'),//首先获取大图片jquery对象
|
20 |
viewImg = $('#view');//小图片jquery对象
|
21 |
//判断该浏览器是否为w3c标准，既非IE浏览器 |
22 |
if (file["files"] && file["files"][0])
|
23 |
{ |
24 |
//使用JavaScript的FileReader对象来读取本地数据，并且将数据结果赋值给image的src，具体该对象如何实现的还未深入研究 |
25 |
var reader = newFileReader();
|
26 |
reader.onload =function(evt){
|
27 |
porImg.attr({src :evt.target.result}); |
28 |
viewImg.attr({src: evt.target.result}); |
29 |
} |
30 |
reader.readAsDataURL(file.files[0]); |
31 |
} |
32 |
//如果是IE浏览器，采用滤镜效果，进行显示，但特别注意的是该滤镜效果使用的对象是div对象，并非img对象，因此我们需要将原有的img对象remove同时生成新的div对象，并且赋值相应的class和id |
33 |
else |
34 |
{ |
35 |
//创建需要滤镜显示的div的dom对象 |
36 |
var ieImageDom =document.createElement("div");
|
37 |
var proIeImageDom =document.createElement("div");
|
38 |
//设置对象的css属性和原有的img对象属性相同，添加相应的id属性值 |
39 |
$(ieImageDom).css({ |
40 |
float: 'left',
|
41 |
position:'relative',
|
42 |
overflow:'hidden',
|
43 |
width: '100px',
|
44 |
height: '100px'
|
45 |
}).attr({"id":"view"});
|
46 |
$(proIeImageDom).attr({"id":"biuuu"});
|
47 |
//删除原有img对象，append创建div的dom对象 |
48 |
porImg.parent().prepend(proIeImageDom); |
49 |
porImg.remove(); |
50 |
viewImg.parent().append(ieImageDom); |
51 |
viewImg.remove(); |
52 |
//采用滤镜效果生成图片预览 |
53 |
file.select(); |
54 |
path =document.selection.createRange().text; |
55 |
$(ieImageDom).css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});
|
56 |
$(proIeImageDom).css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});
|
57 |
// .style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")";//使用滤镜效果 |
58 |
} |
这样就可以实现一个图片的在线编辑以及上传在预览功能。
要注意，代码必须要使用客户端访问，例如：http://loacalhost/imgpreview/index.html，不要直接点击index.html访问
转自:http://blog.csdn.net/danhuang2012/article/details/7703606