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
(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
jQuery(function(){
jQuery("#idFile1").uploadPreview({
width: 100,
height: 100,
imgPreview: "#idImg1",
imgType: ["bmp", "gif", "png", "jpg"],
callback: function() {
ip1();
return false;
}
});
);