最近公司之前的用iframe框架寫的一個老系統要求實現一個身份證上傳並且預覽的需求，兼容到ie9；由於這個項目保密，所以我這邊仿照寫了個demo
效果圖
源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-family: "微軟雅黑";
}
.imgwrap {
width: 300px;
height: 190px;
border: 1px solid #ccc;
border-radius: 10px;
text-align: center;
line-height: 190px;
position: relative;
background: #eee;
overflow: hidden;
font-family: "微軟雅黑";
}
.imgwrap input {
position: absolute;
width: 100%;
left: 0;
top: 0;
outline: none;
opacity: 0;
}
.imgwrap img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
outline: none;
}
.tooltips {
width: 300px;
text-align: center;
}
.tooltips img {
width: 80px;
}
.tooltips h5 {
line-height: 40px;
font-weight: normal;
}
.imgbox {
float: left;
}
.imgboxs {
padding: 0 10px;
overflow: hidden;
}
.ml25 {
margin-left: 25px;
}
.uploadiden {
display: -webkit-box;
/* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box;
/* 老版本語法: Firefox (buggy) */
display: -ms-flexbox;
/* 混合版本語法: IE 10 */
display: -webkit-flex;
/* 新版本語法: Chrome 21+ */
display: flex;
/* 新版本語法: Opera 12.1, Firefox 22+ */
}
.notice {
font-size: 12px;
color: #888;
line-height: 20px;
}
.oprbtn {
position: absolute;
bottom: 0;
left: 0;
line-height: 30px;
display: -webkit-box;
/* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box;
/* 老版本語法: Firefox (buggy) */
display: -ms-flexbox;
/* 混合版本語法: IE 10 */
display: -webkit-flex;
/* 新版本語法: Chrome 21+ */
display: flex;
/* 新版本語法: Opera 12.1, Firefox 22+ */
background: rgba(0, 0, 0, 0.5);
width: 100%;
color: #fff;
text-align: center;
display: none;
}
.oprbtn li {
width: 49%;
list-style: none;
cursor: pointer;
}
.br {
border-right: 1px solid #eee;
}
#zmz {
display: none;
}
#fmz {
display: none;
}
.imgopr:hover .oprbtn {
display: -webkit-box;
/* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box;
/* 老版本語法: Firefox (buggy) */
display: -ms-flexbox;
/* 混合版本語法: IE 10 */
display: -webkit-flex;
/* 新版本語法: Chrome 21+ */
display: flex;
/* 新版本語法: Opera 12.1, Firefox 22+ */
}
</style>
</head>
<body>
<div style="padding: 15px;" class="uploadiden">
<span>上傳圖片</span>
<div>
<div class="imgboxs">
<div class="imgbox">
<div class="imgwrap">
<div class="imgopr">
<img src="" id="zmz" />
<ul class="oprbtn">
<li class="br" onclick="getrImg()" style="float: left;">重新上傳</li>
<li onclick="delimg1()" style="float: right;">刪除</li>
</ul>
</div>
<input type="file" accept="image/*" name="" id="img_z" value="" onchange="getzImg(this)" />
<span onclick="getrImg()">+添加正面</span>
</div>
<div class="tooltips">
<h5>示例</h5>
<img src="img/2.jpg" />
</div>
</div>
<div class="imgbox ml25">
<div class="imgwrap" id="sd">
<div class="imgopr">
<img src="" id="fmz" />
<ul class="oprbtn">
<li class="br" onclick="fanmian()" style="float: left;">重新上傳</li>
<li onclick="delimg2()" style="float: right;">刪除</li>
</ul>
</div>
<input type="file" accept="image/*" onchange="getfImg(this)" value="" id="img_f" />
<span onclick="fanmian()">+添加反面</span>
</div>
<div class="tooltips">
<h5>示例</h5>
<img src="img/1.jpg" />
</div>
</div>
</div>
<div>
<div class="notice">
注:
<p>1、需上傳清晰的身份證正面，反面共2張圖片</p>
<p>2、照片不超過5M，支持jpg、jpeg、png</p>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$('.imgopr').hover(function(){
$(this).children('.oprbtn').show()
},function(){
$(this).children('.oprbtn').hide()
})
//點擊正面照片中重新上傳
function getrImg() {
$('#img_z').click();
}
function getzImg(imgFile) {
var windowURL = window.URL || window.webkitURL;
var dataURL;
if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<=9){
var imgObj = document.getElementById("zmz");
var file = document.getElementById("img_z");
file.select();
/*file.blur();*/
window.parent.document.body.focus()
dataURL = document.selection.createRange().text;
console.log(dataURL)
// document.selection.empty();
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + dataURL + "',sizingMethod=image)";
//圖片必須顯示出來,才能獲取原圖片的高和寬
$("#zmz").show();
//獲取原圖片的高和寬
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + dataURL + "',sizingMethod=scale)";
}
else{
var file = imgFile.files[0];
var filesize = (imgFile.files[0].size / 1024).toFixed(2)
if(filesize > (5 * 1024)) {
alert("圖片大小超過5M，上傳失敗")
} else {
var reader = new FileReader();
reader.readAsDataURL(file); //將文件讀取爲Data URL小文件 這裏的小文件通常是指圖像與 html 等格式的文件
$("#zmz").show()
reader.onload = function(e) {
$("#zmz").attr("src", e.target.result);
}
}
}
}
//刪除正面圖片
function delimg1() {
$("#zmz").attr("src", '');
$("#zmz").hide()
}
//添加反面圖片
function fanmian() {
$('#img_f').click();
}
function getfImg(imgFile) {
var windowURL = window.URL || window.webkitURL;
var dataURL;
if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<=9){
var imgObj = document.getElementById("fmz");
var file = document.getElementById("img_f");
file.select();
window.parent.document.body.focus()
var dataURL = document.selection.createRange().text;
console.log(dataURL)
document.selection.empty();
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + dataURL + "',sizingMethod=image)";
$("#fmz").show();
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + dataURL + "',sizingMethod=scale)";
} else{
var file = imgFile.files[0];
console.log(file)
var filesize = (imgFile.files[0].size / 1024).toFixed(2)
if(filesize > (5 * 1024)) {
alert("圖片大小超過5M，上傳失敗")
} else {
var reader = new FileReader();
reader.readAsDataURL(file);
$("#fmz").show()
reader.onload = function(e) {
$("#fmz").attr("src", e.target.result);
}
}
}
}
function delimg2() {
$("#fmz").attr("src", '');
$("#fmz").hide()
}
</script>
</html>