实现本地图片预览代码,Asp.Net代码库,德仔网

代码语言

代码分类

【Asp.Net】实现本地图片预览

作者:dezai / 发布于2014/2/20/ 339

兼容IE、新版Chrome、Firefox，实现本地图片预览

<style type="text/css">
 #preview{width:110px;height:110px;border:0px solid #000;overflow:hidden;}
 /*#MainPic {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}*/
 #MainPic {width:110px; height:110px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled, sizingMethod=sSize, src=sURL);}
 </style>

 <script type="text/javascript">
 //图片预览
 function previewImage(file) {
 var imageDiv = 'preview' //图片控件DIV
 var imagePic = 'MainPic'; //图片控件名称

 var div = document.getElementById(imageDiv);
 var MAXWIDTH = 110;
 var MAXHEIGHT = 110;
 if (file.files && file.files[0]) {
 div.innerHTML = '<img id=' + imagePic + '>';
 var img = document.getElementById(imagePic);
 img.onload = function () {
 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
 img.width = rect.width;
 img.height = rect.height;
 img.style.marginLeft = rect.left + 'px';
 img.style.marginTop = rect.top + 'px';
 }
 var reader = new FileReader();
 reader.onload = function (evt) { img.src = evt.target.result; }
 reader.readAsDataURL(file.files[0]);

 }
 else {
 var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
 file.select();
 var src = document.selection.createRange().text;
 div.innerHTML = '<img id=' + imagePic + '>';
 var img = document.getElementById(imagePic);
 img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
 status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
 div.innerHTML = "<div id=" + imagePic + " style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;margin-left:" + rect.left + "px;" + sFilter + src + "\"'></div>";
 }
 }
 //比例缩放
 function clacImgZoomParam(maxWidth, maxHeight, width, height) {
 var param = { top: 0, left: 0, width: width, height: height };
 if (width > maxWidth || height > maxHeight) {
 rateWidth = width / maxWidth;
 rateHeight = height / maxHeight;

 if (rateWidth > rateHeight) {
 param.width = maxWidth;
 param.height = Math.round(height / rateWidth);
 } else {
 param.width = Math.round(width / rateHeight);
 param.height = maxHeight;
 }
 }

 param.left = Math.round((maxWidth - param.width) / 2);
 param.top = Math.round((maxHeight - param.height) / 2);
 return param;
 }
</script>



<div id="preview">
 <asp:Image runat=server ID="MainPic" alt="养护员照片"
 ImageUrl="../Images/noimg.gif" />
 </div>

<asp:FileUpload ID="Pic" runat="server" onchange="previewImage(this)" />

试试其它关键字

　本地图片预览　

同语言下

可能有用的

dezai贡献的其它代码(1065)