Jquery Image Upload proportional preview plug-in SET _ jquery-js tutorial

You can generate code for proportional scaling within a fixed range of width and height during upload. For more information, see. The js part is like this:

The Code is as follows:

// ********************** Image Upload preview plug-in ************ ************
// Author: IDDQD)
// Email: iddqd5376@163.com
// Http://blog.sina.com.cn/iddqd
// Version 1.0

// Description: Image Upload preview plug-in
// You can generate proportional scaling charts within the fixed width and height range during upload.

// Parameter settings:
// Width stores the image fixed-size container width
// Height stores the Image height of a fixed-size container
// The JQuery id of the imgDiv page DIV
// ImgType array suffix
// ********************** Image Upload preview plug-in ************ *************
(Function ($ ){
JQuery. fn. extend ({
UploadPreview: function (opts ){
Opts = jQuery. extend ({
Width: 0,
Height: 0,
ImgDiv: "# imgDiv ",
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
Callback: function () {return false ;}
}, Opts | {});
Var _ self = this;
Var _ this = $ (this );
Var imgDiv =$ (opts. imgDiv );
ImgDiv. width (opts. width );
ImgDiv. height (opts. height );

AutoScaling = function (){
If ($. browser. version = "7.0" | $. browser. version = "8.0") imgDiv. get (0 ). filters. item ("DXImageTransform. microsoft. alphaImageLoader "). sizingMethod = "image ";
Var img_width = imgDiv. width ();
Var img_height = imgDiv. height ();
If (img_width> 0 & img_height> 0 ){
Var rate = (opts. width/img_width <opts. height/img_height )? Opts. width/img_width: opts. height/img_height;
If (rate <= 1 ){
If ($. browser. version = "7.0" | $. browser. version = "8.0") imgDiv. get (0 ). filters. item ("DXImageTransform. microsoft. alphaImageLoader "). sizingMethod = "scale ";
ImgDiv. width (img_width * rate );
ImgDiv. height (img_height * rate );
} Else {
ImgDiv. width (img_width );
ImgDiv. height (img_height );
}
Var left = (opts. width-imgDiv. width () * 0.5;
Var top = (opts. height-imgDiv. height () * 0.5;
ImgDiv.css ({"margin-left": left, "margin-top": top });
ImgDiv. show ();
}
}
_ This. change (function (){
If (this. value ){
If (! RegExp ("\. ("+ opts. imgType. join ("|") + ") $", "I "). test (this. value. toLowerCase ())){
Alert ("the image type must be" + opts. imgType. join (",") + ");
This. value = "";
Return false;
}
ImgDiv. hide ();
If ($. browser. msie ){
If ($. browser. version = "6.0 "){
Var img = $ ("");
ImgDiv. replaceWith (img );
ImgDiv = img;

Var image = new Image ();
Image. src = 'file: // '+ this. value;

ImgDiv. attr ('src', image. src );
AutoScaling ();
}
Else {
ImgDiv.css ({filter: "progid: DXImageTransform. Microsoft. AlphaImageLoader (sizingMethod = image )"});
ImgDiv. get (0). filters. item ("DXImageTransform. Microsoft. AlphaImageLoader"). sizingMethod = "image ";
Try {
ImgDiv. get (0). filters. item ('dximagetransform. Microsoft. AlphaImageLoader '). src = this. value;
} Catch (e ){
Alert ("invalid image file! ");
Return;
}
SetTimeout ("autoScaling ()", 100 );

}
}
Else {
Var img = $ ("");
ImgDiv. replaceWith (img );
ImgDiv = img;
ImgDiv. attr ('src', this. files. item (0). getAsDataURL ());
ImgDiv.css ({"vertical-align": "middle "});
SetTimeout ("autoScaling ()", 100 );
}
}
});
}
});
}) (JQuery );

Page:

The Code is as follows: