本文实例介绍了基于JQUERY扩展,图片上传预览插件,目前兼容浏览器(IE 谷歌 火狐) 不支持safari,分享给大家供大家参考,具体内容如下
HTML代码:
js代码:
直接上第二段代码,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 ){
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;
}
<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)"/>