自己做的小例子,凑合看吧
<style>
#title{
position: relative;
width: 90%;
color: #4c4a4b;
margin-left: 5%;
font-size: 16px;
margin-top: 5px;
font-weight:bold;
}
ul{
position: relative;
width: 90%;
margin-left: 5%;
height: 30px;
margin-top: 10px;
border-bottom: solid 1px #979797;
}
.warn{
height: 40px;
font-size: 14px;
text-align:left;
}
.edit{
position: relative;
width: 90%;
margin-left: 5%;
border-bottom: solid 1px #ededed;
height: 50px;
text-align:left;
}
.edit_project{
position: relative;
height: 50px;
line-height: 50px;
font-size: 15px;
float: left;
}
input,textarea{
position: relative;
width: 200px;
height: 50px;
font-size: 15px;
border: solid 0;
}
.shenfenzheng{
position: relative;
width: 90%;
margin-left: 5%;
border-bottom: solid 1px #ededed;
height: 250px;
text-align:left;
}
.image_border{
width:240px;
height:180px;
background-color:#ededed;
cursor: pointer;
overflow: hidden;
display: inline-block;
text-align:center;
vertical-align:middle;
clear:both;
}
.image_border img{
border: 0px;
vertical-align: middle;
display: inline-block;
width: 100%;
height: 100%;
}
</style>
</head>
<body class="bg_f">
<ul >
<p id='title'>添加清关证明</p>
</ul>
<ul class="warn">
<p><span style="color:red;">*注意:</span>上传该收货地址中收货人的身份证信息,身份证号必须与收货人姓名一致。</p>
</ul>
<form id="paySubmit" action="<%=basePath%>uploadIdCard/uploadIdCardInfo" method="post" enctype="multipart/form-data">
<input type="hidden" name="usrid" value="${usrid}"/>
<input type="hidden" name="address_id" value="${address_id }"/>
<ul class="edit">
<p class="edit_project">真实姓名:</p><input type="text" name="really_name" value="" />
</ul>
<ul class="edit">
<p class="edit_project">身份证号:</p><input type="text" name="id_card" value="" />
</ul>
<ul class="shenfenzheng">
<p class="edit_project"> 身份证件照(正面)</p>
<a class="image_border" id="paizhao">
<img id="img0" src="<%=basePath%>dist/images/pay/tuijian/upload_back.jpg" />
</a>
<input type="file" name="idCardImageFront" id="idCardImageFront" style='display:none;' />
</ul>
<ul class="shenfenzheng">
<p class="edit_project"> 身份证件照(反面)</p>
<a class="image_border" id="paizhao2">
<img id="img1" src="<%=basePath%>dist/images/pay/tuijian/upload_back.jpg" />
</a>
<input type="file" name="idCardImageBack" id="idCardImageBack" style='display:none;' />
</ul>
<input type="submit" value="上传" />
</form>
</body>
<script type="text/javascript">
$(function(){
var status = '${status}';
if(status == 'ok'){
alert("Thank you! 上传成功!");
}else if(status =='error'){
alert("对不起,上传失败,请重新上传!");
}
});
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
$('#paizhao').click(function(){
$("#idCardImageFront").click();
});
$("#idCardImageFront").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
if (objUrl) {
$("#img0").attr("src", objUrl).show();
}
});
$('#paizhao2').click(function(){
$("#idCardImageBack").click();
});
$("#idCardImageBack").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
if (objUrl) {
$("#img1").attr("src", objUrl).show();
}
});
</script>