jQuery实现本地预览上传图片功能

本文实例介绍了基于JQUERY扩展，图片上传预览插件，目前兼容浏览器(IE 谷歌火狐) 不支持safari，分享给大家供大家参考，具体内容如下

HTML代码：

rush:xhtml;"> <a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a><a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>预览演示

图片上传预览演示

js 代码：

rush:js;"> *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法; *使用方法:

把需要进行预览的img标签外套一个DIV 然后给上传控件ID给予uploadPreview事件 $("#up").uploadPreview({ Img: "ImgPr",Height: 120,ImgType: ["gif","jpeg","jpg","bmp","png"],Callback: function () { }}); */ jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this,_this = $(this); opts = jQuery.extend({ Img: "ImgPr",Width: 100,Height: 100,Callback: function () {} },opts || {}); _self.getobjectURL = function (file) { var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL(file) } else if (window.URL != undefined) { url = window.URL.createObjectURL(file) } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file) } return url }; _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) { try { $("#" + opts.Img).attr('src',_self.getobjectURL(this.files[0])) } catch (e) { var src = ""; var obj = $("#" + opts.Img); var div = obj.parent("div")[0]; _self.select(); if (top != self) { window.parent.document.body.focus() } else { _self.blur() } src = document.selection.createrange().text; document.selection.empty(); obj.hide(); obj.parent("div").css({ 'filter': 'progid:DXImageTransform.Microsoft.AlphaimageLoader(sizingMethod=scale)','width': opts.Width + 'px','height': opts.Height + 'px' }); div.filters.item("DXImageTransform.Microsoft.AlphaimageLoader").src = src } } else { $("#" + opts.Img).attr('src',_self.getobjectURL(this.files[0])) } opts.Callback() } }) } });

直接上第二段代码，jquery js实现上传图片之前预览本地图片

rush:js;">

// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径  
objPreview.src = sender.files[0].getAsDataURL();

}else if( objPreviewFake.filters ){
// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决

// IE7,IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径  
sender.select();  
var imgSrc = document.selection.createRange().text;  

objPreviewFake.filters.item(  
  'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;  
objPreviewSizeFake.filters.item(  
  'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;  

autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight );  
objPreview.style.display = 'none';

}
}

function onPreviewLoad(sender){
autoSizePreview( sender,sender.offsetWidth,sender.offsetHeight );
}

function autoSizePreview( objPre,originalWidth,originalHeight ){
var zoomParam = clacImgZoomParam( 300,300,originalHeight );
objPre.style.width = zoomParam.width + 'px';
objPre.style.height = zoomParam.height + 'px';
objPre.style.marginTop = zoomParam.top + 'px';
objPre.style.marginLeft = zoomParam.left + 'px';
}

function clacImgZoomParam( maxWidth,maxHeight,width,height ){
var param = { width:width,height:height,top:0,left:0 };

if( width>maxWidth || height>maxHeight ){
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;

if( rateWidth > rateHeight ){  
  p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m.width = maxWidth;  
  p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m.height = height / rateWidth;  
}else{  
  p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m.width = width / rateHeight;  
  p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m.height = maxHeight;  
}

}

param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2;

return param;
}

jQuery实现本地预览上传图片功能

HTML代码：

js代码：

相关文章

js 代码：