html
<div class="uploadframe">
<h4>请上传身份证</h4>
<div class="item">
<img src="images/plus.png" οnclick="clickImg(this);" class="addImg">
<input name="url" type="file" class="upload_input" οnchange="change(this)"/>
<div class="preBlock">
<img class="preview" id="preview" alt="" name="pic" src=""/>
</div>
<img class="delete" οnclick="deleteImg(this)" src="images/delete.png"/>
<p>正面</p>
</div>
<div class="item">
<img src="images/plus.png" οnclick="clickImg(this);" class="addImg">
<input name="url" type="file" class="upload_input" οnchange="change(this)"/>
<div class="preBlock">
<img class="preview" id="previewanti" alt="" name="pic" />
</div>
<img class="delete" οnclick="deleteImg(this)" src="images/delete.png"/>
<p>反面</p>
</div>
</div>
<div class="uploadtel">
<label>联系电话:</label>
<input type="number" placeholder="请输入联系电话" id="numberId"/>
</div>
<button type="button" class="uploadbtn" οnclick="uploadimg()">立即上传</button>
css
.delete {
width: 18px;
position: absolute; right: 8px; top: -6px; cursor: pointer; display: none; } .preview,.preBlock{ position: absolute; display: block; width: 100%; left: 0; top: 0; } .preBlock img { display: block; width:90%; height: 120px; } .upload_input{ display: block; width: 0; height: 0; -webkit-opacity: 0.0; /* Netscape and Older than Firefox 0.9 */ -moz-opacity: 0.0; /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/ -khtml-opacity: 0.0; /* IE9 + etc...modern browsers */ opacity: .0; /* IE 4-9 */ filter:alpha(opacity=0); /*This works in IE 8 & 9 too*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*IE4-IE9*/ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); } .item { width: 49%; display: inline-block; position: relative; } .addImg { width: 90%; position: absolute; left: 0; top: 0; z-index: 2; cursor: pointer; height: 120px; } .item p{ position: absolute; bottom: -160px; } input{ margin-bottom: 0!important; }
js(实现选择图片并返回图片)
var clickImg = function(obj){
$(obj).parent().find('.upload_input').click();
}
//删除 var deleteImg = function(obj){ $(obj).parent().find('input').val(''); $(obj).parent().find('img.preview').attr("src",""); //IE9以下 $(obj).parent().find('img.preview').css("filter",""); $(obj).hide(); $(obj).parent().find('.addImg').show(); } //选择图片 function change(file) { //预览 var pic = $(file).parent().find(".preview"); //添加按钮 var addImg = $(file).parent().find(".addImg"); //删除按钮 var deleteImg = $(file).parent().find(".delete"); var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase(); // gif在IE浏览器暂时无法显示 if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){ if (ext != '') { alert("图片的格式必须为png或者jpg或者jpeg格式!"); } return; } //判断IE版本 var isIE = navigator.userAgent.match(/MSIE/)!= null, isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null; isIE10 = navigator.userAgent.match(/MSIE 10.0/)!= null; if(isIE && !isIE10) { file.select(); var reallocalpath = document.selection.createRange().text; // IE6浏览器设置img的src为本地路径可以直接显示图片 if (isIE6) { pic.attr("src",reallocalpath); }else{ // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现 pic.css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")"); // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片 pic.attr('src','data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); } addImg.hide(); deleteImg.show(); }else { html5Reader(file,pic,addImg,deleteImg); } } //H5渲染 function html5Reader(file,pic,addImg,deleteImg){ var file = file.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ pic.attr("src",this.result); } addImg.hide(); deleteImg.show(); }