html5文件上传,html上传图片并显示
下面的是在ie9下面实现的预览，跟ie8还是不一样的，不过我记得貌似ie8好像也是利用了滤镜的功能，因为项目只要求在ie9以上，所以就没有写出ie8的啦复制代码代码如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题文档/标题
/头
身体
pstyle type=text/css
#kk{
宽度：400像素
高度：400像素
溢出：隐藏；
}
#preview_wrapper{
宽度：300像素
高度：300像素
背景色：# CCC
溢出：隐藏；
}
#preview_fake{ /*该对象用于在工业管理学(工业工程)下显示预览图片*/
过滤器：progid:DXImageTransform .微软。alpha图像加载器(调整大小方法=缩放)；
宽度：300像素
溢出：隐藏；
}
#preview_size_fake{ /*该对象只用来在工业管理学(工业工程)下获得图片的原始尺寸，无其它用途*/
过滤器：progid:DXImageTransform .微软。alpha图像加载器(调整大小方法=图像)；
宽度：300像素
可见性：隐藏；
溢出：隐藏；
}
#预览{ /*该对象用于在消防下显示预览图片*/
宽度：300像素
高度：300像素
溢出：隐藏；
}
/style script type= text/JavaScript
函数onUploadImgChange(发送方){
如果(!sender.value.match( /.jpg .gif .png .bmp/i ) ){
警报(图片格式无效!);
返回错误的
}
var objPreview=document。getelementbyid(“预览”)；
var objPreviewFake=document。getelementbyid( preview _ fake )；
var objPreviewSizeFake=document。getelementbyid( preview _ size _ fake )；
如果(发件人。文件发送者。文件[0]){//这里面就是铬和消防可以兼容的了
objpreview。风格。display= block
objpreview。风格。width= auto
objpreview。风格。height= auto
//Firefox因安全性问题已无法直接通过输入[文件]。价值获取完整的文件路径
objPreview.src=sender.files[0].getastaurl()；
} else if(objpreviewfake。过滤器){
//IE7，IE8在设置本地图片地址为img.src时出现莫名其妙的后果
//(相同环境有时能显示，有时不显示),因此只能用滤镜来解决
//IE7，IE8因安全性问题已无法直接通过输入[文件]。价值获取完整的文件路径
发件人。select()；
发件人。blur()；
var img src=文档。选择。创建范围().文本；
objpreviewfake。过滤器。item( DXImageTransform .微软。AlphaImageLoader).src=imgSrc
objpreviewsizefake。过滤器。item( DXImageTransform .微软。AlphaImageLoader).src=imgSrc
警报(已成功选择图片!);
alert(objpreviewsizefake。offsetwidth)；
autoSizePreview( objPreviewFake，objPreviewSizeFake.offsetWidth，objPreviewSizeFake。offset height)；
objpreview。风格。display= none
}
}
函数onPreviewLoad(发送方){
autoSizePreview( sender，sender.offsetWidth，sender。offset height)；
}
函数autoSizePreview( objPre，originalWidth，originalHeight ){
var zoom param=clacimgzoom param(300，300，originalWidth，original height)；
目标预测。风格。宽度=缩放参数。宽度 px ；
目标预测。风格。高度=缩放参数。高度 px ；
目标预测。风格。上边距=缩放参数。顶级‘px’；
目标预测。风格。左边距=缩放参数。左‘px’；
}
函数clacImgZoomParam( maxWidth，maxHeight，Width，height ){
var param={ width:width，height:height，top:0，left:0 }；
if(width maxwidth heightmaxHeight){
速率宽度=宽度/最大宽度；
率高=身高/最大身高；
if( rateWidth rateHeight ){
param.width=maxWidth
参数。高度=高度/率宽；
}否则{
参数。宽度=宽度/率高；
param.height=maxHeight
}
}
参数。left=(maxWidth-param。宽度)/2；
参数。top=(最大高度-参数。高度)/2；
返回参数；
}
/script input name= local file type= file id= local file size= 28 onchange= onUploadImgChange(this)/！-以下是预览图片用的-
div id=kk
div id=预览_包装
div id=preview_fake
img id= preview src= onload= onPreviewLoad(this)/
/div
/div
br/
img id=preview_size_fake /
/div/p
/body
/html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。