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

前端之家收集整理的这篇文章主要介绍了jQuery实现本地预览上传图片功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

HTML代码

<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代码

图片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实现上传图片之前预览本地图片

<script type="text/javascript">
function onUploadImgChange(sender){
if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){
alert('图片格式无效!');
return false;
}
var objPreview = document.getElementByIdx_x('preview');
var objPreviewFake = document.getElementByIdx_x('preview_fake');
var objPreviewSizeFake = document.getElementByIdx_x('preview_size_fake');
if( sender.files && sender.files[0] ){
objPreview.style.display = 'block';
objPreview.style.width = 'auto';
objPreview.style.height = 'auto';

// 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 ){  
  param.width = maxWidth;  
  param.height = height / rateWidth;  
}else{  
  param.width = width / rateHeight;  
  param.height = maxHeight;  
}  

}

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

return param;
}

<input name="localfile" type="file" id="localfile" size="28" onchange="onUploadImgChange(this)"/>

<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" src="" onload="onPreviewLoad(this)"/>


以上就是本文的全部内容,希望对大家的学习有所帮助。

原文链接:https://www.f2er.com/jquery/50664.html

猜你在找的jQuery相关文章