实用的 图片上传 html+css

html

<form id="mainForm">
    <div class="content">
            <div class="label">车辆照片</div>
            <div class="img-area">
                <div class="container">
                    <input type="file" id='id-face' name='face' accept="image/*" />
                    <div id='face-empty-result'>
                        <img style='width:4rem' src="../image/camera.png" alt="">
                        <p>车辆前侧照片</p>
                    </div>
                    <img style='width: 100%' id='face-result' />
                </div>
                <div class="container" style='margin-top:0.5rem;'>
                    <input type="file" id='id-back' name='back' accept="image/*" />
                    <div id='back-empty-result'>
                        <img style='width:4rem' src="../image/camera.png" alt="">
                        <p>车辆后侧照片</p>
                    </div>
                    <img style='width: 100%' id='back-result' />
                </div>
            </div>
        </div>
        <div class="btn">
            提交
        </div>
</form>

css

body {
    text-align: center;
    font: normal 100% Helvetica, Arial, sans-serif;
    margin: 0
}

.content {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px #999 solid
}

.label {
    width: 5rem;
}

.img-area {
    flex: 1
}

.container {
    background-color: #e7e7e7;
    position: relative;
}

.container div {
    text-align: center;
    padding: 0.5rem 0
}

.container input {
    opacity: 0;
    filter: alpha(opacity=0);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

.container p {
    font-size: 0.9rem;
    color: #999
}

.btn {
    background-color: #4363ab;
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;
    width: 80%;
    border-radius: 0.2rem;
    margin: 2rem auto;
    font-weight: 600;
    font-size: 1.2rem
}

js

apiready = function() {
  document.getElementById("id-face").addEventListener("change", function(){
      onFileChange(this,"face-result","face-empty-result")
  });
  document.getElementById("id-back").addEventListener("change", function(){
      onFileChange(this,"back-result","back-empty-result")
  });
  document.getElementsByClassName("btn")[0].addEventListener("click", function(){
      submit();
  });
  /**
   * 选中图片时的处理
   * @param {*} fileObj input file元素
   * @param {*} el //选中后用于显示图片的元素ID
   * @param {*} btnel //未选中图片时显示的按钮区域ID
   */
  function onFileChange(fileObj,el,btnel){
      var windowURL = window.URL || window.webkitURL;
      var dataURL;
      var imgObj = document.getElementById(el);
      document.getElementById(btnel).style.display="none";
      imgObj.style.display="block";
      if (fileObj && fileObj.files && fileObj.files[0]) {
          dataURL = windowURL.createObjectURL(fileObj.files[0]);
          imgObj.src=dataURL;
      } else {
          dataURL = fileObj.value;
          imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
          imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
      }
  }
  /**
   * 将图片压缩后返回base64格式的数据
   * @param {*} image img元素
   * @param {*} width 压缩后图片宽度
   * @param {*} height 压缩后图片高度
   * @param {*} qua //图片质量1-100
   */
  function compressImageTobase64(image,width,height,qua){
      var quality = qua ? qua / 100 : 0.8;
      var canvas = document.createElement("canvas"),
          ctx = canvas.getContext('2d');
      var w = image.naturalWidth,
          h = image.naturalHeight;
      canvas.width = width||w;
      canvas.height = height||h;
      ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h);
      var data = canvas.toDataURL("image/jpeg", quality);
      return data;
  }
  //提交
  function submit(){
      //1、form提交
      //document.getElementById("mainForm").submit();
      //2、压缩后ajax提交
      var face_data=compressImageTobase64(document.getElementById("face-result"),200,200,100);
      var back_data=compressImageTobase64(document.getElementById("back-result"),200,200,100);
      var myTruck = {};
      myTruck.pic = JSON.stringify([face_data,back_data]);
      myTruck.brand = $api.byId('brand').value;
      myTruck.name = $api.byId('name').value;
      myTruck.drive = $api.byId('drive').value;
      myTruck.power = $api.byId('power').value;
      if($api.byId('new').value == 0){
        myTruck.age = parseInt($api.byId('age').value);
      }else{
        myTruck.age = 0 ;
      }
      myTruck.standard = $api.byId('standard').value;
      myTruck.gear = $api.byId('gear').value;
      myTruck.container = $api.byId('container').value;
      myTruck.type = $api.byId('type').value;
      if($api.byId('baoxian').value == 1){
        myTruck.lns = parseInt($api.byId('lns').value);
      }else{
        myTruck.lns = 0 ;
      }
      myTruck.price = $api.byId('price').value;
      myTruck.mark = $api.byId('mark').value;

      //需引入jQuery
      $.ajax({
          url:"http://192.168.1.36:8080/SearchData/getData/insert",
          type: 'POST',
          cache: false,
          data: JSON.stringify(myTruck),
          timeout:180000,
          dataType: 'json',
          contentType: 'application/json',
          success:function(r){
            alert( '数据已保存!' );
          },
          error:function(r){
            alert( '数据保存错误!' );
          }
     });
    // api.ajax({
    //     url: 'http://192.168.1.36:8080/SearchData/getData/insert',
    //     method: 'post',
    //     headers: {
    //       'Content-Type': 'application/json;charset=utf-8'
    //     },
    //     data: {
    //         values: {
    //             Stu: JSON.stringify(stu)
    //         }
    //     },
    //     cache: false
    // },function(ret, err){
    //     if (ret) {
    //         alert( JSON.stringify( ret ) );
    //     } else {
    //         alert( JSON.stringify( err ) );
    //     }
    // });

  }

  $api.addEvt($api.byId('new'), 'change', function(){
    var n = this.value;
    if(n == 0){
      $api.after($api.byId('neworold'), '<tr id=\"age-num\"><td class=\"right\">车龄(月)</td><td class=\"left\"><input type=\"text\" id=\"age\" name=\"age\" placeholder=\"12\" value=\"0\" /></td></tr>');
    }else{
      $api.remove($api.byId('age-num'));
    }
  });

  $api.addEvt($api.byId('baoxian'), 'change', function(){
    var n = this.value;
    if(n==1){
      $api.after($api.byId('lnsorno'), '<tr id=\"lns-num\"><td class=\"right\">保险时长(月)</td><td class=\"left\"><input type=\"text\" id=\"lns\" name=\"lns\" placeholder=\"12\" value=\"0\" /></td></tr>');
    }else{
      $api.remove($api.byId('lns-num'));
    }
  });

};