首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

下传图片之前预览的效果(支持所有浏览器,包括IE6-8,chrome,opera,firefox等)

2012-08-08 
上传图片之前预览的效果(支持所有浏览器,包括IE6-8,chrome,opera,firefox等)今天在做一个考试系统,需要上

上传图片之前预览的效果(支持所有浏览器,包括IE6-8,chrome,opera,firefox等)

今天在做一个考试系统,需要上传证件照,在选取了文件之后,需要首先预览一下。也就是在没有上传前先预览。

这个最让人头痛的就是兼容各种浏览器,往往IE的可以了,其他的浏览器又不行,经过大半天的尝试,终于能够通过所有浏览器。以下是相应的js代码:

注意,所有的js文件只有两个是外部接口,也就是两个id,分别是上传控件<input type="file">的id为fileid,还有<div>的id为preview,此来显示图片。

最后应用到自己的项目时,只需在以下js代码里改掉这两个id为自己的id即可。

 <div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:180px;height:190px;border:solid 1px black;">  <input type="file" id="fileid" name="photofile" onchange="preImg(this.id,'imgid');"/>



不能合理的运行,可以给我留言。

热点排行