<span style="font-family:Microsoft YaHei;font-size:12px;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片上传预览</title>
</head>
<body>
<div class="content" style="width: 300px;height: 50px;margin: 50px auto 0;position: relative;">
<form method="" action="" id="upload">
<div style="width: 300px;opacity: 0;z-index: 999;position: absolute;">
<input type="file" id="selectImg" value=""></input>
<input type="hidden" name="imgId"></input>
</div>
</form>
<div class="cover" style="z-index: 99;opacity:1;">
<input type="button" id="chooseImg" value="选择图片" style="background: #e8e8e8;border: 1px solid #a8a8a8;height: 30px;"></input>
</div>
</div>
<div id="previewDiv" style="width: 300px;height: 200px;margin: 0 auto;border: 1px solid #a8a8a8;text-align: center;color: #d8d8d8;" >
<img src="" alt="将在这里预览图片" id="previewImg" style="max-width: 150px;max-height: 200px;">
<!--进度条-->
<div id="progress" style="color: black"></div>
</div>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function preview(imgobj,previewImgId,previewDivId){
var accept = /^(.+)\.(jpg||jpeg||png||gif)$/g;
var browserVersion = window.navigator.userAgent.toLowerCase();
if (accept.test(imgobj.value)) {
//上传为可接受图片格式
if(imgobj.files){
//上传了图片文件
if (window.FileReader) {//html5实现文件上传,兼容ie10及以上 chrome,ff7+
var reader = new FileReader();
reader.onload = function(){
$("#previewImg").attr("src",this.result);
}
reader.readAsDataURL(imgobj.files[0]);
//将文件以data:url形式读取,写入到result属性中,没有返回值
// reader.onprogress = function(e) {
// document.getElementById("progress").textContent = (e.loaded/imgobj.files[0].size).toFixed(2)*100+"%";
// }
}
}
else if(browserVersion.indexOf("firefox")>-1){
//不支持html5;兼容低版本火狐浏览器
$("#previewImg").attr("src",imgobj.files[0].getAsDataURL());
}
else if (browserVersion.indexOf("msie") > -1) {
//ie浏览器
if (browserVersion.indexOf("msie 6") > -1) {
//兼容ie6
$("#previewImg").attr("src",imgobj.value);
}
else{
//ie[7-9]因为该版本浏览器处于安全性考虑,屏蔽了上传文件的真是本地地址,使用以下获取真实地址
//在ie中使用滤镜进行预览图片,
imgobj.select();
if (browserVersion.indexOf("msie 9") > -1) {
//ie9中必须将焦点从文本域移开,否则拒绝document.selection.createRange().text
$("#previewImg").focus();
//如果上传控件在框架中,imgobj.blur并不能达到目的,所以可以将任意元素聚焦来达到目的。
}
// var a = document.selection.createRange().text;
//在测试的时候有点小bug,这部分我在想一下!
}
}
else {
document.getElementById(previewImgId).setAttribute("src", imgobj.value);
}
}
else{
alert("图片格式不符合,请选择jpg/png/gif/jpeg格式的图片");
imgobj.value = ""; //清空选中文件
if (browserVersion.indexOf("msie") > -1) {//兼容ie9及以下浏览器
imgobj.select();
document.selection.clear();
}
}
}
$("#chooseImg").click(function(){
$("#selectImg").click().select();
})
$("#selectImg").change(function(){
preview(this,$("#previewImg"),"previewDiv");
})
</script>
</body>
</html></span>
用到的web api详细可看这篇文章点击打开链接