图片预览自适应

一、表单单图片上传

 <form action="#" class="form-horizontal tasi-form" id="formpic" enctype="multipart/form-data">
                        

        <div  style="width:400px;height: 400px; position: relative;overflow: hidden;margin-right:20px;padding: 0;border:1px solid #CCCCCC;text-align:center;vertical-align:middle;line-height: 400px">
   
        <img src="" alt=""  class="img-thumbnail" id="show_img" style="vertical-align:middle;" onload="resizeimg(this,400,400);">

         <input type="file" name="file" id="oFile"  style=" position:absolute;top:0;left:0;width: 100%; height: 100%; cursor: pointer; opacity: 0;"/>
              </div>
                         
          
                               
                           
 </form>
 
  

  <script>
  function resizeimg(obj,maxW,maxH)
  {
           var imgW=obj.width;
           var imgH=obj.height;

           if(imgW>maxW||imgH>maxH)
           {       
                    var ratioA=imgW/maxW;
                    var ratioB=imgH/maxH;               
                    if(ratioA>ratioB)
                    {
                             imgH=maxW*(imgH/imgW);
                             imgW=maxW;
           
                    }
                    else
                    {
                             imgW=maxH*(imgW/imgH);
                             imgH=maxH;

                    }  
                    obj.width=imgW;
                    obj.height=imgH;
           }

       
  }
  $(function(){
 
    $("#oFile").change(function(){
        var fileObj = this.files[0] ; 
        var reader = new FileReader();
          reader.readAsDataURL(fileObj);
          reader.onload = function(f) {
            var show_img = $("#show_img");
        
            show_img.removeAttr('width');
            show_img.removeAttr('height');
            show_img.attr("src", this.result);

          }

        $.ajax({
          url: ,
          type: 'POST',
          cache: false,
          data: new FormData($('#formpic')[0]),
          dataType: 'json',
          processData: false,
          contentType: false,
          success:function(data){
              console.og(data);
              
            },
          error:function(error){
              
          }
        });
    });

二、多图片

$("#compare").click(function(){
     var form = new FormData();
     form.append('file_img[]', document.getElementById('oFile').files[0]);
     form.append('file_img[]', document.getElementById('oFile1').files[0]);
     if(window.XMLHttpRequest){
           var xhr=new XMLHttpRequest();
     }else{
           var xhr=new ActiveXObject('Microsoft.XMLHTTP');
     }
     xhr.open('POST', "<?= Url::to(['face/upload']) ?>",true);
     xhr.send(form);
     xhr.onreadystatechange = function () {
         if (xhr.readyState == 4){
              if (xhr.status>=200 && xhr.status<300 || xhr.status==304) {
                               console.log('发送'); //仅示例
                               var data = JSON.parse(xhr.responseText);
    
                  }
           }
    };
   });