Heim > Web-Frontend > js-Tutorial > jquery实现兼容浏览器的图片上传本地预览功能_jquery

jquery实现兼容浏览器的图片上传本地预览功能_jquery

WBOY
Freigeben: 2016-05-16 17:20:00
Original
1301 Leute haben es durchsucht
一、图片上传实现本地预览

由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐、谷歌、ie8,其他的没有进行测试过
复制代码 代码如下:

(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);
//设置样式
autoScaling = function(){
imgPreview.css({"margin-left": 0,"margin-top": 0,"width":opts.width,"height":opts.height});
imgPreview.show();
}
//file按钮出发事件
_this.change(function(){
if (this.value) {
if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("图片类型必须是" + opts.imgType.join(",") + "中的一种");
this.value = "";
return false;
}
if ($.browser.msie) {//判断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 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);

二、调用方法
复制代码 代码如下:

jQuery(function(){
jQuery("#idFile1").uploadPreview({
width: 100,
height: 100,
imgPreview: "#idImg1",
imgType: ["bmp", "gif", "png", "jpg"],
callback: function() {
ip1();
return false;
}
});
);
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage