文章参考此站点应用,演示:http://www.ibisai.com.cn/
今天在做一个考试系统,需要上传证件照,在选取了文件之后,需要首先预览一下。也就是在没有上传前先预览。
这个最让人头痛的就是兼容各种浏览器,往往IE的可以了,其他的浏览器又不行,经过大半天的尝试,终于能够通过所有浏览器。以下是相应的js代码:
注意,所有的js文件只有两个是外部接口,也就是两个id,分别是上传控件<input type="file">的id为fileid,还有<div>的id为preview,此来显示图片。
最后应用到自己的项目时,只需在以下js代码里改掉这两个id为自己的id即可。
// 获取本地上传的照片路径
function getPath(obj) {
if (obj) {
//ie
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
// IE下取得图片的本地路径
return document.selection.createRange().text;
}
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
// Firefox下取得的是图片的数据
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
//显示图片
function previewPhoto(){
var picsrc=getPath(document.all.fileid);
var picpreview=document.getElementById("preview");
if(!picsrc){
return
}
if(window.navigator.userAgent.indexOf("MSIE") >= 1) {
if(picpreview) {
try{
picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picsrc;
}catch(ex){
alert("文件路径非法,请重新选择!") ;
return false;
}
}else{
picpreview.innerHTML="<img src='"+picsrc+"' />";
}
}
}
function preImg(fileid, imgid) {
if (typeof FileReader == 'undefined') {
var picsrc=getPath(document.all.fileid)
$("#imgid").attr({ src: picsrc});
previewPhoto();
}
else{
var reader = new FileReader();
var name=$("#fileid").val();
var picpreview=document.getElementById("preview");
reader.onload = function(e) {
var img = document.getElementById(imgid);
//img.src = this.result;
picpreview.innerHTML="<img src='"+this.result+"' style='width: 179px; height: 189px;' />";
}
reader.readAsDataURL(document.getElementById(fileid).files[0]);
}
}
<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" οnchange="preImg(this.id,'imgid');"/>