Home > Web Front-end > JS Tutorial > jquery implements browser-compatible image upload local preview function_jquery

jquery implements browser-compatible image upload local preview function_jquery

WBOY
Release: 2016-05-16 17:20:00
Original
1308 people have browsed it
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;
}
});
);
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template