图片上传

支持选择并预览本地图片。

示例代码

<style>
  .lists{width: 100%; background: #FFF; border-radius: 5px; padding: 0 15px; box-sizing: border-box;}
  .list{width: 100%; font-size: 0; padding: 5px 0;}
  .list input{width: auto; min-width: 100px; height: 50px; line-height: 50px; padding: 0; font-size: 14px; color: #646464; border: none; text-align: right; margin: 0;  float: right;}
  .img-items{width: 100%; font-size: 0;}
  .img-item{width: -webkit-calc((100% - 30px) / 3); width: calc((100% - 30px) / 3); height: -webkit-calc((100vw - 30px - 30px - 30px) / 3); display: inline-block; vertical-align: top; margin: 0 0 15px 0; border-radius: 5px; position: relative;}
  .img-item:nth-child(3n-1){margin: 0 15px 15px 15px;}
  .add-item{line-height: -webkit-calc((100vw - 30px - 30px - 30px) / 3); line-height: calc((100vw - 30px - 30px - 30px) / 3); text-align: center;}
  .add-item i{font-size: 30px; color: #aaa;}
  .add-item:after{border-radius: 5px;}
  .img-item .img{height: 100%; height: 100%; background: #F4F4F4; overflow: hidden; border-radius: 5px; position: relative;}
  .img-item .img img{width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
  .img-item .delete-btn{width: 25px; height: 25px; text-align: center; border: 2px solid #FFF; border-radius: 50%; background: var(--aui-blue); position: absolute; top: -10px; right: -10px;}
  .img-item .delete-btn i{font-size: 15px; color: #FFF; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
  .submit-btn{width: 100%; background: var(--aui-blue); margin: 30px 0; color: #FFF; font-size: 15px;}
</style>
<div class="content" style="padding: 15px 15px 0px;">
  <ul class="lists">
    <li class="list">
      <label for="">上传照片<i class="red">*</i>
        <span class="tip">(最多3张单张照片不大于10MB)</span>
      </label>
      <dl class="img-items">
        <dd class="img-item add-item border">
          <input type="file" hidden="hidden" onchange="addImg" name="" id="addimg" value="" accept="image/*">
          <i class="iconfont iconadd2"></i>
        </dd>
      </dl>
    </li>
  </ul>
  <div class="submit-btn aui-btn">提交</div>
</div>
<script>
  var images = []; // 已选图片
  function addImg(){
      var file = document.querySelector('#addimg').files[0];
      if(images.length >= 3){aui.toast({msg: '最多可上传3张'}); return;}
      if(file.size >= 1024 * 1024 * 10){aui.toast({msg: '照片大于10MB,请重新上传'}); return;}
    
      var reader = new FileReader();
      reader.onloadend = function () {
          images.push(reader.result); //添加
      }
      if (file) {
          reader.readAsDataURL(file);
      }
    
      //创建FormData对象
      var data = new FormData();
      //为FormData对象添加数据
      data.append('file', file);
      data.append('path', "uploads/images/feedback");
      data.append('thumb', "0");
      $.ajax({
          url: 'uoloadurl',
          type: 'post',
          contentType: false,
          processData: false,
          data: file,
          success: function(ret){
              if(ret.status == 0){
                  typeof callback == 'function' ? callback(ret.data) : '';
              }
          },
      });
  }
</script>