js图片上传本地预览兼容(IE7-8-9\firefox\chrome)

By fushanlang, on December 17th, 2012

上面由于代码显示控件去除了html header标签，可以参照以下完整的内容:

<pre> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #preview{width:300px;height:300px;border:1px solid #000;overflow:hidden;} #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); width:300px; visibility:hidden; overflow: hidden; } </style> <script type="text/javascript"> function previewImage(file) { var MAXWIDTH = 300; var MAXHEIGHT = 300; var div = document.getElementById('preview'); if (file.files && file.files[0]) { div.innerHTML = '<img id=imghead>'; var img = document.getElementById('imghead'); 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; var objPreviewSizeFake = document.getElementById('preview_size_fake'); objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; div.innerHTML = '<img id=imghead>'; var img = document.getElementById('imghead'); img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight); status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); div.innerHTML = "<div id=divhead 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> </head> <body> <div id="preview"> <img id="imghead" border=0 src='' /> </div> <div style="width:1px;height:1px;overflow: hidden;"> <img id="preview_size_fake" /> </div> <br/> <input type="file" onchange="previewImage(this)" /> </body> </html></pre> <p>

浮山狼de博客

js图片上传本地预览兼容(IE7-8-9\firefox\chrome)

Leave a Reply

Email

最新评论

交换友链

友情博客

:( This function doesnt work well under Google Chrome Browser.

Feedsky RSS
Comments RSS

浮山狼de博客

js图片上传本地预览兼容(IE7-8-9\firefox\chrome)

Leave a Reply

Email

最新评论

Tags

交换友链

友情博客