Jquery's upload image preview plug-in

Plug-in code:

View plaincopy to clipboardprint?
01. (function ($ ){
02. $. FN. previewimage = function (options ){
03. var default = {
04. imageclientid :"",
05. max width: 300,
06. maxheight: 300
07 .};
08. $. Extend (true, default, options );
09. return this. Each (function (){
10. If (default. imageclientid! = ""){
11. $ (this). Unbind ("change ");
12. $ (this). Change (function (){
13. If ($ (this). Val () = ""){
14. $ ("#" + default. imageclientid). Parent ("Div"). Hide ();
15. return;
16 .}
17. else {
18. $ ("#" + default. imageclientid). Parent ("Div"). Show ();
19 .}
20. If ($. browser. MSIE ){
21. $ ("#" + default. imageclientid). ATTR ("src", $ (this). Val ());
22 .}
23. else {
24. $ ("#" + default. imageclientid). ATTR ("src", $ (this) [0]. Files [0]. getasdataurl ());
25 .}
26. If ($. browser. MSIE & $. browser. version> 6 ){
27. $ ("#" + default. imageclientid). Hide ();
28. $ ("#" + default. imageclientid). Parent ("Div" ).css ({'z-Index': '2016 ',
29. 'filter': 'progid: DXImageTransform. Microsoft. alphaimageloader (sizingmethod = scale )',
30. 'max-width': Default. maxwidth + 'px ', 'max-height': Default. maxheight + 'px ',
31. 'width': Default. maxwidth + 'px ', 'height': Default. maxheight + 'px'
32 .});
33. var DIV = $ ("#" + default. imageclientid). Parent ("Div") [0];
34. Div. Filters. Item ("DXImageTransform. Microsoft. alphaimageloader"). src = $ ("#" + default. imageclientid). ATTR ("src ");
35 .}
36 .});
37.
38. $ ("#" + default. imageclientid). Load (function (){
39. var image = new image ();
40. image. src = $ (this). ATTR ("src ");
41. $ (this). ATTR ("width", default. maxwidth );
42. $ (this). ATTR ("height", default. maxheight );
43. $ (this). ATTR ("Alt", default. maxwidth + "X" + default. maxheight );
44 .});
45 .}
46 .});
47 .};
48.}) (jquery );
(Function ($ ){
$. FN. previewimage = function (options ){
VaR default = {
Imageclientid :"",
Maxwidth: 300,
Maxheight: 300
};
$. Extend (true, default, options );
Return this. Each (function (){
If (default. imageclientid! = ""){
$ (This). Unbind ("change ");
$ (This). Change (function (){
If ($ (this). Val () = ""){
$ ("#" + Default. imageclientid). Parent ("Div"). Hide ();
Return;
}
Else {
$ ("#" + Default. imageclientid). Parent ("Div"). Show ();
}
If ($. browser. MSIE ){
$ ("#" + Default. imageclientid). ATTR ("src", $ (this). Val ());
}
Else {
$ ("#" + Default. imageclientid). ATTR ("src", $ (this) [0]. Files [0]. getasdataurl ());
}
If ($. browser. MSIE & $. browser. version> 6 ){
$ ("#" + Default. imageclientid). Hide ();
$ ("#" + Default. imageclientid). Parent ("Div" ).css ({'z-Index': '2016 ',
'Filter': 'progid: DXImageTransform. Microsoft. alphaimageloader (sizingmethod = scale )',
'Max-width': Default. maxwidth + 'px ', 'max-height': Default. maxheight + 'px ',
'Width': Default. maxwidth + 'px', 'height': Default. maxheight + 'px'
});
VaR DIV = $ ("#" + default. imageclientid). Parent ("Div") [0];
Div. Filters. Item ("DXImageTransform. Microsoft. alphaimageloader"). src = $ ("#" + default. imageclientid). ATTR ("src ");
}
});

$ ("#" + Default. imageclientid). Load (function (){
VaR image = new image ();
Image. src = $ (this). ATTR ("src ");
$ (This). ATTR ("width", default. maxwidth );
$ (This). ATTR ("height", default. maxheight );
$ (This). ATTR ("Alt", default. maxwidth + "X" + default. maxheight );
});
}
});
};
}) (Jquery );

Usage:

View plaincopy to clipboardprint?
01. $ (document). Ready (function (){
02. $ ("# fileupload1"). previewimage ({imageclientid: "imuple", maxwidth: "300", maxheight: "200 "});
03 .});
$ (Document). Ready (function (){
$ ("# Fileupload1"). previewimage ({imageclientid: "imuple", maxwidth: "300", maxheight: "200 "});
});

Note:

The IMG tag must be wrapped with a div.

<Div> </div>

This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/zhou5157/archive/2010/03/26/5419821.aspx