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

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

<

a

href

=

"javascript:void(0);"

class

=

"button"

>上传照片</

a

>

2

<

input

type

=

'text'

name

=

"path"

readonly>

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

$(

'<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 之后

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

}