jquery implements browser-compatible image upload local preview function_jquery

1. Image upload to achieve local preview

Due to the function of uploading images, most of them now need to preview locally. In order to better allow users to experience the effect and achieve proof of finished products, It needs to be compatible with several browsers. This example plug-in is integrated through each example and is compatible with Firefox, Google, and IE8. Others have not been tested

Copy code 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 style
autoScaling = function(){
imgPreview.css({"margin-left": 0,"margin-top" : 0,"width":opts.width,"height":opts.height});
imgPreview.show();
}
//file button trigger event
_this.change( function(){
if (this.value) {
if (!RegExp(".(" opts.imgType.join("|") ")$", "i").test(this. value.toLowerCase())) {
alert("The image type must be one of " opts.imgType.join(", ") "");
this.value = "";
return false;
}
if ($.browser.msie) {//Judge ie
var path = $(this).val();
if (/"wW"/.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);

2. Calling method

Copy code 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;
}
});
);