移动端H5页面上传图片

在做移动端页面开发的时候，经常会遇到需要上传图片。比如头像上传，发表动态上传多张图片。

一、多张图片上传

html

 <div class="addimg" style="display: flex; flex-flow:row wrap;">
    <!-- 上传后的图片插到这里，prepend() -->
    <!-- <div class="img_box" style="background-image:url(images/addimg.png)"><div class="tips">0%</div></div> -->

    <!-- 上传控件 -->
    <div id="img_url">
        <input class="js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""
            style="width: 1rem; height: 1rem; opacity:0">
    </div>
 </div>

css

/* 插入的图片样式 */
    .img_box {
   
      float: left;
      margin-right: 9px;
      margin-bottom: 9px;
      width: 1rem;
      height: 1rem;
      background: no-repeat center center;
      background-size: contain;
      position: relative;
    }

    /* 进度条样式 */
    .tips {
   
      top: 50%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: .2rem;
      color: #fff;
    }

js(结合jquery.weui使用)

 $(function () {
   
      // 允许上传的图片类型  
      var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
      // 1024KB，也就是 1MB  
      var maxSize = 1024 * 1024;
      // 图片最大宽度  
      var maxWidth = 3000;
      // 最大上传图片数量  
      var maxCount = 4;
      // 上传控件
      $('.js_file').on('change', function (event) {
   
        var files = event.target.files;
        // 如果没有选中文件，直接返回  
        if (files.length === 0) {
   
          return;
        }

        for (var i = 0, len = files.length; i