One, the picture uploads realizes the local preview
Because the upload image function, now most need to implement the preview in the local, in order to be able to better let the user experience the effect, achieve the proof of the finished product, need to be compatible with several kinds of browsers, all through each example integrated this example plug-in, compatible with Firefox, Google, IE8, others have not been
Copy Code code 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 style
autoscaling = function () {
Imgpreview.css ({"Margin-left": 0, "Margin-top": 0, "width": opts.width, "height": opts.height});
Imgpreview.show ();
}
File Button Start Event
_this.change (function () {
if (this.value) {
if (! REGEXP ("\. (" + Opts.imgType.join ("|") + ") $", "I"). Test (This.value.toLowerCase ()) {
Alert ("Picture type must be" + opts.imgType.join (",") + "one of");
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\/jpeg |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.target.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);
second, call the method
Copy Code code as follows:
JQuery (function () {
JQuery ("#idFile1"). Uploadpreview ({
WIDTH:100,
HEIGHT:100,
Imgpreview: "#idImg1",
Imgtype: ["BMP", "GIF", "png", "JPG"],
Callback:function () {
Ip1 ();
return false;
}
});
);
