一、图片上传实现本地预览
由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐、谷歌、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(){ returnfalse; }
}, 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 < 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);
二、调用方法
由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐、谷歌、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(){ returnfalse; }
}, 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 < 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);
二、调用方法
复制代码 代码如下:







网友评论文明上网理性发言已有0人参与
发表评论: