H5图片上传

HTML部分

<div class="container page-myComment">
    <div class="common-header">
        <a href="" class="goback ablock"><img src="../imgs/i_back.png" alt="" class="img"></a>
        <div class="title">意见反馈</div>
        <div class="share"></div>
    </div>
    <div class="feedback">
        <textarea class="textarea" placeholder="请详细描述您的问题，或者您有什么建议"></textarea>
        <div class="upload" id="pickimg_group"></div>
        <div class="upload">
            <div class="upload-icon">
                <input type="file" id="inputFile" accept="image/gif, image/jpeg" style="display: none;" onchange="changeAgentContent()">
                <input type="text" value="" disabled style="display: none;" id="inputFileAgent" />
                <input type="button" class="upload-input" id="upload" value="Browse..." />
                <img src="../imgs/camera.png" alt="" class="img">
            </div>
            <div class="upload-title">上传照片</div>
        </div>
    </div>
    <a href="" class="commit">提交</a>
</div>

CSS部分

.page-myComment {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    .feedback {
        width: 100vw;
        box-sizing: border-box;
        padding: 0 4.67vw;
        .textarea {
            width: 100%;
            height: 48vw;
            padding: 4.67vw 0;
            font-size: 3.73vw;
            line-height: 6vw;
            border-top: none;
            border-left: none;
            border-right: none;
            border-bottom: 1px solid #e2e2e2;
            outline: none;
            resize: none;
        }
        .upload {
            position: relative;
            margin-top: 4.67vw;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            .upload-img {
                width: 13.33vw;
                height: 19.33vw;
                background-color: #ffffff;
                box-shadow: 0vw 0.4vw 1.33vw 0vw rgba(0, 0, 0, 0.1);
                border-radius: 0.53vw;
                overflow: hidden;
                line-height: 0;
                border: solid 0.27vw #e2e2e2;
                box-sizing: border-box;
                margin-right: 4vw;
                img {
                    width: 13.33vw;
                    height: 13.33vw;
                }
                .delete {
                    border-top: 1px solid #e2e2e2;
                    width: 13.33vw;
                    height: 6vw;
                    text-align: center;
                    line-height: 4vw;
                    color: #666;
                    font-size: 3.2vw;
                }
            }
            .upload-icon {
                width: 13.33vw;
                height: 13.33vw;
                background-color: #ffffff;
                box-shadow: 0vw 0.4vw 1.33vw 0vw 
                    rgba(0, 0, 0, 0.1);
                border-radius: 0.53vw;
                overflow: hidden;
                line-height: 0;
                border: solid 0.27vw #e2e2e2;
                box-sizing: border-box;
                padding: 4vw 3.6vw;
                margin-right: 4vw;
                .upload-input {
                    position: absolute;
                    display: block;
                    width: 13.33vw;
                    height: 13.33vw;
                    background-color: transparent;
                    top: 0;
                    left: 0;
                    z-index: 1;
                    outline: none;
                    border: none;
                }
            }
            .upload-title {
                font-size: 3.73vw;
                color: #999999;
            }
        }
    }
    .commit {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100vw;
        height: 11.73vw;
        line-height: 11.73vw;
        text-align: center;
        font-size: 4.8vw;
        color: #fff;
        background-color: #9966b4;
    }
}

JS部分

$(function() {
  $('#upload').click(function() {
      document.getElementById('inputFile').click()
  });
  var pickimg_list = [];
  function changeAgentContent(){
      var value = $('#inputFile').val();
      console.log(value)
      $('#inputFileAgent').val(value);
      f = $('#inputFile')[0].files[0];
      var reads = new FileReader();
      reads.readAsDataURL(f); // 
      reads.onload = function() {
          pickimg_list.push(this.result);
          renderImg();
      }
      // var formData = new FormData();
      // formData.append('file', f);  //添加图片信息的参数
      // formData.append("name", $("#name").val());
      // common.showLoading();
      // $.ajax({
      //     url: "/addons/mental/User/upload",
      //     type: "post",
      //     dataType: "json",
      //     cache: false,
      //     data: formData,
      //     processData: false,// 不处理数据
      //     contentType: false, // 不设置内容类型
      //     success: function (data) {
      //         console.log(data)
      //         if (data.code == 1) {
      //             pickimg_list.push(data.path);
      //             renderImg();
      //         }
      //     },
      //     complete: function() {
      //         common.hideLoading();
      //     }
      // })
  }
  function renderImg() {
      $('#pickimg_group').empty();
      if(pickimg_list.length >= 5) {
          $('.upload').eq(1).hide();
      }else {
          $('.upload').eq(1).show();
      }
      for(var i = 0, l = pickimg_list.length; i < l; i++) {
          $('#pickimg_group').append('<div class="upload-img"><img alt="" src="' + pickimg_list[i] + '"><div class="delete">删除</div>');
      }
      $('.delete').click(function() {
          var delete_index = $('.delete').index($(this));
          pickimg_list.splice(delete_index, 1);
          renderImg();
      })
  }
})