上传图片之前预览的效果(支持所有浏览器,包括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');"/>