点击选择图片并返回上传

html

       <div class="uploadframe">
            <h4>请上传身份证</h4>
            <div class="item">
                <img src="images/plus.png" onclick="clickImg(this);" class="addImg">
                <input name="url" type="file" class="upload_input" onchange="change(this)"/>
                 <div class="preBlock">
                    <img class="preview" id="preview" alt="" name="pic" src=""/>
                </div>
                <img class="delete" onclick="deleteImg(this)" src="images/delete.png"/>
                <p>正面</p>
            </div>
            <div class="item">
                <img src="images/plus.png" onclick="clickImg(this);" class="addImg">
                <input name="url" type="file" class="upload_input" onchange="change(this)"/>
                 <div class="preBlock">
                    <img class="preview" id="previewanti" alt="" name="pic" />
                </div>
                <img class="delete" onclick="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" onclick="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();
          }