Html image preview and upload (supports ie, google, and Firefox)
// 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 imgShow page DIV
// MaxSize Maximum image size (K)
// ImgType array suffix
// ********************** Image Upload preview plug-in ************ *************
(Function ($ ){
JQuery. fn. extend ({
UploadPreview: function (opts ){
Opts = jQuery. extend ({
Width: 120,
Height: 120,
IntImg: "1 ",
ImgAll: "# imgAll ",
ImgShow: "# imgShow ",
MaxSize: 30000,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
Callback: function () {return false ;}
}, Opts | {});
// Var _ self = this;
Var _ this = $ (this );
Var imgAll = $ (opts. imgAll );
Var imgShow =$ (opts. imgShow );
ImgShow. width (opts. width );
Var intImg = opts. intImg;
// ImgShow. height (opts. height );
Var version = parseInt ($. browser. version, 10 );
// Pop-up layer
Var propBox = "";
// Pop-up layer img
Var propImg = "";
AutoScaling = function (){
If (version = 7 | version = 8 | version = 9) imgShow. get (0 ). filters. item ("DXImageTransform. microsoft. alphaImageLoader "). sizingMethod = "image ";
Var img_width = imgShow. width ();
Var img_height = imgShow. 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 (version = 7 | version = 8 | version = 9) imgShow. get (0 ). filters. item ("DXImageTransform. microsoft. alphaImageLoader "). sizingMethod = "scale ";
ImgShow. width (img_width * rate );
ImgShow. height (img_height * rate );
} Else {
ImgShow. width (img_width );
ImgShow. height (img_height );
}
Var left = (opts. width-imgShow. width () * 0.5;
Var top = (opts. height-imgShow. height () * 0.5;
ImgShow.css ({"margin-left": left, "margin-top": top });
ImgShow. show ();
}
},
CreateImg = function (){
/* ImgShow.html ('');
Var img = $ ("");
ImgShow. replaceWith (img );
ImgShow = img ;*/
If (! $ ("# Img_on_change" + intImg). length> 0 ){
ImgShow. before ("");
// Click "delete image css ".
$ ("# Img_on_delete" +intimg0000.css ({
'Position': 'absolute ',
'Background': '# cedded ',
'Z-Index': '123 ',
'Right': '2px ',
'Top': '3px ',
'Cursor ': 'pointer'
});
ImgShow. before ("");
// Click to enlarge the image's css
$ ("# Img_on_change" +intimg0000.css ({
'Position': 'absolute ',
'Background': '# cedded ',
'Z-Index': '123 ',
'Right': '20px ',
'Top': '3px ',
'Cursor ': 'pointer'
});
$ ('Body'). append (propBox + propImg );
}
// Close the image
$ ('# Close_img' + intImg). unbind ("click"). click (function (){
$ ('# Fade' + intImg). hide ();
$ ('# MyDiv' + intImg). hide ();
});
// Image deletion button
$ ('# Img_on_delete' + intImg). unbind ("click"). click (function (){
Var id = $ (this). attr ("id ");
Var num = id. replace ("img_on_delete ","");
$ ("# ImgAll" + num). remove ();
});
// The image enlargement button binding event
$ ('# Img_on_change' + intImg). unbind ("click"). click (function (){
Var windowW = $ (window). width ();
Var rows wh = $ (window). height ();
Var windowS = document.doc umentElement. scrollTop + document. body. scrollTop;
$ ('# Fade' + intImg). show (350, function (){
$ ('# MyDiv' + intImg). show (0, function (){
Var I _width = $ ("# myImg" + intImg). width ();
Var I _height = $ ("# myImg" + intImg). height ();
Certificate ('{mydiv'{intimg}.css ({
'Top': Running WH/2 + windowS-I _height/2 + 'px ',
'Left': windowW/2-I _width/2 + 'px ',
})
});
});
});
},
_ 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;
}
// ImgShow. hide ();
If ($. browser. msie & version <10 ){
If (version = 6 ){
Var image = new Image ();
Image. onload = function (){
If (image. fileSize/1024)> opts. maxSize ){
Alert ('image size cannot exceed '+ opts. maxSize + 'k ');
Return false;
}
}
Image. src = 'file: // '+ this. value;
CreateImg ();
ImgShow. attr ('src', image. src );
$ ("# MyImg" + intImg). attr ('src', image. src );
AutoScaling ();
} Else {
This. select ();
Var img = document. selection. createRange (). text;
Var image = new Image ();
Image. onload = function (){
If (image. fileSize/1024)> opts. maxSize ){
Alert ('image size cannot exceed '+ opts. maxSize + 'k ');
Return false;
}
}
Image. src = img;
ImgShow.html ('');
ImgShow.css ({filter: "progid: DXImageTransform. Microsoft. AlphaImageLoader (sizingMethod = image )"});
ImgShow. get (0). filters. item ("DXImageTransform. Microsoft. AlphaImageLoader"). sizingMethod = "image ";
$ ("# MyImg" effecintimg0000.html ('');
$ ("# MyImg" effecintimg0000.css ({filter: "progid: DXImageTransform. Microsoft. AlphaImageLoader (sizingMethod = image )"});
$ ("# MyImg" + intImg). get (0). filters. item ("DXImageTransform. Microsoft. AlphaImageLoader"). sizingMethod = "image ";
Try {
ImgShow. get (0). filters. item ('dximagetransform. Microsoft. AlphaImageLoader '). src = img;
$ ("# MyImg" + intImg). get (0). filters. item ('dximagetransform. Microsoft. AlphaImageLoader '). src = img;
} Catch (e ){
Alert ("invalid image file! ");
Return;
}
SetTimeout ("autoScaling ()", 100 );
}
}
Else {
Try {
Var file = null;
Var size = 0;
If (this. files & this. files [0]) {
File = this. files [0];
Size = file. size;
} Else if (this. files & this. files. item (0 )){
File = this. files. item (0 );
Size = file. fileSize;
}
If (size/1024)> opts. maxSize ){
Alert ('image size cannot exceed '+ opts. maxSize + 'k ');
Return false;
}
CreateImg ();
// Firefox cannot directly obtain the complete file path through input [file]. value due to security issues
Try {
// Below Firefox7.0
ImgShow. attr ('src', file. getAsDataURL ());
$ ("# MyImg" + intImg). attr ('src', file. getAsDataURL ());
} Catch (e ){
// Firefox8.0 or above
ImgShow. attr ('src', window. URL. createObjectURL (file ));
$ ("# MyImg" + intImg). attr ('src', window. URL. createObjectURL (file ));
}
ImgShow.css ({"vertical-align": "middle "});
SetTimeout ("autoScaling ()", 100 );
} Catch (e ){
// Html5 browsers, such as firefox, chrome, and ie10
If (this. files & this. files [0]) {
If ([0]. size/1024)> opts. maxSize ){
Alert ('image size cannot exceed '+ opts. maxSize + 'k ');
Return false;
}
Var reader = new FileReader ();
Reader. onload = function (e ){
ImgShow. attr ('src', e.tar get. result );
$ ("# MyImg" + intImg). attr ('src', e.tar get. result );
};
Reader. readAsDataURL (this. files [0]);
SetTimeout ("autoScaling ()", 100 );
}
};
}
}
});
}
});
}) (JQuery );
Bytes -------------------------------------------------------------------------------------Call MethodBytes --------------------------------------------------------------------------------------------
// Display the image
Var intImg = 0;
Function addImg (){
IntImg = intImg + 1;
$ ("# Img_td"). append (
"
"
+ ""
// + ""
+ ""
// + ""
+" "
+ ""
);
$ ("# Files" + intImg). unbind ("click"). on ("click", function (){
Var id = $ (this). attr ("id ");
Var num = id. replace ("files ","");
$ ("# Files" + num ). uploadPreview ({width: 120, height: 120, imgAll: "# imgAll" + num, imgShow: "# imgShow" + num, intImg: num });
}). Unbind ("change"). change (function (){
Var id = $ (this). attr ("id ");
Var num = id. replace ("files ","");
If (intImg = num ){
AddImg ();
}
});
$ ("# ImgAll" + intImg). mouseover (function (){
Var id = $ (this). attr ("id ");
Var num = id. replace ("imgAll ","");
$ ("# ImgShowi" + num). attr ("src", "/images/img_addhov.png ");
}). Mouseout (function (){
Var id = $ (this). attr ("id ");
Var num = id. replace ("imgAll ","");
$ ("# ImgShowi" + num). attr ("src", "/images/img_add.png ");
});
}
---------------------------------------------------------------HtmlBytes ------------------------------------------------------------------------------------------
Certificate ---------------------------------------------------------------------------------------------------------------------------------------------------------------
There are three more pictures in it. Look for them. There are a lot of close.png zoom.png dele.png online.
There are two more pictures that move the mouse. If you cannot upload attachments, paste them directly. (I don't know why you can't upload the images. Just name them. "/images/img_addhov.png" "/images/img_add.png ")
