Jquery allows you to preview images uploaded locally in a browser.

The code of the Image Upload local preview function can be searched on the Internet, but it is more compatible with browsers. This article provides a good example. If you are interested, refer I. Local preview of image uploading

Most of the Image Upload functions need to be previewed locally. In order to better enable users to experience the effect and prove the finished product, you need to be compatible with several browsers, all examples are integrated with this example plug-in, which is compatible with Firefox, Google, and ie8. Others have not been tested.

The Code is as follows:

(Function ($ ){
JQuery. fn. extend ({
UploadPreview: function (opts ){
Opts = jQuery. extend ({
Width: 0,
Height: 0,
ImgPreview: null,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
Callback: function () {return false ;}
}, Opts | {});

Var _ self = this;
Var _ this = $ (this );
Var imgPreview =$ (opts. imgPreview );
// Set the style
AutoScaling = function (){
ImgPreview.css ({"margin-left": 0, "margin-top": 0, "width": opts. width, "height": opts. height });
ImgPreview. show ();
}
// File button event
_ 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;
}
If ($. browser. msie) {// judge ie
Var path = $ (this). val ();
If (/"\ w \ W"/. test (path )){
Path = path. slice (1,-1 );
}
ImgPreview. attr ("src", path );
ImgPreview.css ({"margin-left": 0, "margin-top": 0, "width": opts. width, "height": opts. height });
SetTimeout ("autoScaling ()", 100 );
}
Else {
If ($. browser. version <7 ){
ImgPreview. attr ('src', this. files. item (0). getAsDataURL ());
}
Else {
OFReader = new FileReader (), rFilter =/^ (? : Image \/bmp | image \/cis \-cod | image \/gif | image \/ief | image \/jpeg | image \ /pipeg | image \/png | image \/svg \ + xml | image \/tiff | image \/x \-cmu \-raster | image \/x \-cmx | image \/x \-icon | image \/x \-portable \-anymap | image \/x \-portable \-bitmap | image \/x \-portable \-graymap | image \/x \-portable \-pixmap | image \/x \-rgb | image \/x \-xbitmap | image \/x \-xpixmap | image \/x \-xwindowdump) $/I;
OFReader. onload = function (oFREvent ){
ImgPreview. attr ('src', oFREvent.tar get. result );
};
Var oFile = this. files [0];
OFReader. readAsDataURL (oFile );
}
ImgPreview.css ({"margin-left": 0, "margin-top": 0, "width": opts. width, "height": opts. height });
SetTimeout ("autoScaling ()", 100 );
}
}
Opts. callback ();
});
}
});
}) (JQuery );

Ii. Call Method

The Code is as follows:

JQuery (function (){
JQuery ("# idFile1"). uploadPreview ({
Width: 100,
Height: 100,
ImgPreview: "# idImg1 ",
ImgType: ["bmp", "gif", "png", "jpg"],
Callback: function (){
Ip1 ();
Return false;
}
});
);