Jquery to achieve browser compatible image upload local preview function

  • 2020-03-26 21:24:31
  • OfStack

One, picture upload to achieve local preview

Due to the function of uploading pictures, now most of them need to be previewed locally. In order to better let the user experience the effect and realize the proof of finished products, it needs to be compatible with several browsers. All of them have integrated this example plug-in through various examples, compatible with firefox, Google, ie8, and others have not been tested
 
(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(); 
} 
//The file button sets off the 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(" . ") + " One of the "); 
this.value = ""; 
return false; 
} 
if ($.browser.msie) {//Determine the 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); 

Call the method
 
jQuery(function(){ 
jQuery("#idFile1").uploadPreview({ 
width: 100, 
height: 100, 
imgPreview: "#idImg1", 
imgType: ["bmp", "gif", "png", "jpg"], 
callback: function() { 
ip1(); 
return false; 
} 
}); 
); 

Related articles: