`

文件上传显示成+号的那种做法

    博客分类：
  • html
html 
阅读更多


自己做的小例子，凑合看吧

<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>

 
 

  • 大小: 26.8 KB
分享到：
| 主流开发框架和前台模板
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics