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

前端技术 2023/09/01 JavaScript

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

HTML代码：

<html>
<head>
<title>图片上传预览演示</title>
<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\" type=\"text/javascript\"></script>
<script src=\"16/uploadPreview.js\" type=\"text/javascript\"></script>
<script>
$(function () {
$(\"#up\").uploadPreview({ Img: \"ImgPr\", Width: 120, Height: 120 });
});
</script>
</head>
<body>
<div style=\"width:500px;margin:0px auto;\"><h2>图片上传预览演示</h2>
<a href=\"# target=\"_blank\">原文</a>

<div><img id=\"ImgPr\" width=\"120\" height=\"120\" /></div>
<input type=\"file\" id=\"up\" />
</div>

</body>
</html>

js代码：

*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;
*使用方法: 
<div>
<img id=\"ImgPr\" width=\"120\" height=\"120\" /></div>
<input type=\"file\" id=\"up\" />
把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件
$(\"#up\").uploadPreview({ Img: \"ImgPr\", Width: 120, 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,
ImgType: [\"gif\", \"jpeg\", \"jpg\", \"bmp\", \"png\"],
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实现上传图片之前预览本地图片 

<style type=\"text/css\">
#preview_wrapper{  
  display:inline-block;  
  width:300px;  
  height:300px;  
  background-color:#CCC;
}  
#preview_fake{  
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);  
}  
#preview_size_fake{  
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);   
  visibility:hidden;  
}  
#preview{  
  width:300px;  
  height:300px;  
}  
</style>

<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, originalWidth, 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;  
}
</script>
 
<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)\"/>
</div>
</div>
<br/>
<img id=\"preview_size_fake\" />

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

本文地址：https://www.stayed.cn/item/1670

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案