<!
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
>
<
title
>
Firefox3,IE6,IE7,IE8上传图片预览</
title
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
style
type
="text/css"
>
#preview_wrapper
{
display
:
inline-block
;
width
:
300px
;
height
:
300px
;
background-color
:
#CCC
;
}
#preview_fake
{
/*
该对象用户在IE下显示预览图片
*/
filter
:
progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
;
}
#preview_size_fake
{
/*
该对象只用来在IE下获得图片的原始尺寸,无其它用途
*/
filter
:
progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)
;
visibility
:
hidden
;
}
#preview
{
/*
该对象用户在FF下显示预览图片
*/
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.getElementById(
'
preview
'
);
var
objPreviewFake
=
document.getElementById(
'
preview_fake
'
);
var
objPreviewSizeFake
=
document.getElementById(
'
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){
alert(
'
onload
'
);
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
>
</
head
>
<
body
>
<
div
id
="preview_wrapper"
>
<
div
id
="preview_fake"
>
<
img
id
="preview"
onload
="onPreviewLoad(this)"
/>
</
div
>
</
div
>
<
br
/>
<
input
id
="upload_img"
type
="file"
onchange
="onUploadImgChange(this)"
/><
br
/>
<
img
id
="preview_size_fake"
/>
</
body
>
</
html
>
分享到:
相关推荐
input file上传图片预览
实现上传图片预览的方式,共三种方法,各自的作用和效果不同,有需要的朋友可以看看
实用JS,jQuery实现上传图片的预览功能,可以跟随鼠标移动
C#上传图片预览,aspx,winform,都有。。
asp 上传图片预览 ie7-11 火狐 谷歌 qq 360 360双模式下测试
html上传图片预览和裁剪(适合鼠标) 希望可以帮助有需要的人
上传图片预览效果示例程序,上传图片预览效果示例程序
很方便的js实现图片上传马上预览的效果~~~
MVC+jquery 实现的上传图片预览
dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览...
js上传图片预览图片.pdf
IE上传图片预览,上传完一张图片,马上在页面上显示
上传图片预览 图片压缩 按尺寸图片裁剪 打水印 设置在JD_Sys_Conventional表中 JD_ImgDefinition 清晰度 JD_WaterFont 水印字体 JD_ImgRule 生成规则 (三种选择,1是HW,指定高宽缩放(可能变形)2是W,...
JS上传图片预览,支持IE,火狐,谷歌等浏览器
JQUERY上传图片预览,简单实用,对于上传一张照片的应用程序有很大帮助
上传图片预览及指定元素下方显示图片预览,代码中有使用示例
主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
asp.net 上传图片 预览+裁剪demo 框架3.5 上传之前可预览并裁剪 基于flash 裁剪时 可以缩放和拖动图片。