点击选择图片并返回上传

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(); }

 

转载于:https://www.cnblogs.com/cupidity/p/8603542.html