input 多图片上传

css我引用啦mui 不过不影响上传功能 自己喜欢什么样子自行引用,当然弹窗也是用的mui.js

废话不多说直接上代码

<div class="tips">
        <p>上传图片（最多只能上传3张图片）</p>
    </div>
    <div class="photo-list mui-clearfix" style="display:flex">
        <div class="photo">
            <span>+</span>
            <input type="file" id="file" class="filepath"/>
        </div>
        <div class="phto"></div>
    </div>

.photo{
        width: 80px;
        border: 1px dashed #eee;
        height: 80px;
        vertical-align: middle;
        text-align: center;
        display: flex;
        align-items: center;
      }
      .photo span{
          color: #eee;
          position: absolute;
          z-index: 99999;
          left: 35px;
      }
      .photos{
        width: 80px;
        border: 1px dashed #eee;
        height: 80px;
        vertical-align: middle;
        text-align: center;
        display: flex;
        align-items: center;
      }
      .photos span{
          color: #eee;
          position: absolute;
          z-index: 99999;
          left: 35px;
      }
      .filepath{
          width:100%;
          height:100%;
          opacity: 0;
      }
      .del{
            position: absolute;
            width: 100%;
            height: auto;
            background-color: #eee;
            opacity: 0.8;
            display: block;
            text-align: center;
            line-height: 2;
            bottom: 0;
            z-index: 9999999;
      }
      .phto{
            width: 80%;
            height: auto;
            float: left;
            display: flex;
      }

//选择图片
      var photofath=[]
      var photolists=[]
      var fileobj = []
        $('#file').on('change', function() {//当chooseImage的值改变时，执行此函数
            var filePath = $(this).val() //获取到input的value，里面是文件的路径
            fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
            src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
         // 检查是否是图片
         if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
                mui.toast("上传错误,文件格式必须为：png/jpg/jpeg！",{ duration:'long', type:'div' })
                return;
            }else if(photolists.indexOf(filePath) !== -1){
                mui.toast("请不要重复上传!!",{ duration:'long', type:'div' })
                return;
            }else{
                if(photofath.length==2){
                    $('.photo').css('display','none') //上传超过两张隐藏
                }
                //把我们需要的本地地址，预览地址以及上传的files保存成数组
                photolists.push(filePath)
                photofath.push(src)
                fileobj.push(this.files[0])
                var  photolist=''
                //本地预览图片
                for(i in photofath){
                    photolist +='<div style="width:25%;position: relative;margin-left:5px">'
                        +'<img src="'+photofath[i]+'" width="100%" height="80px">'
                         +'<span class="del" οnclick="dels(\''+photofath[i]+'\',\''+i+'\')">'+"删除"+'</span>'
                     +'</div>'
                }
              $('.phto').html(photolist);  
            }
            $('#file').val('')
        });
        //删除
        function dels(val,key){
            if(confirm('确认删除!!')){
            //把我们保存的几个需要的数组进行处理 毕竟我们删除操作要处理数据
                var index=photofath.indexOf(val);
                photolists.splice(index, 1);
                photofath.splice(index, 1);
                fileobj.splice(index, 1)
                var a=parseInt(key)+1
                if(photofath.length<1){
                    $('.phto').children().remove();
                }else{
                    $('.phto div:nth-child('+a+')').remove();
                }
                 if(photofath.length<3){
                      $('.photo').css('display','flex')
                }
                mui.toast("删除成功！",{ duration:'long',type:'div' }) 
            }
        };

重点来了我们要提交数据给后端

 	//提交数据事件
        PostButton.addEventListener('tap', function() {
          var index=parent.layer.getFrameIndex(window.name);
          //注意创建一个formData用来放数据
          var formData = new FormData();
          //把我们所有的图片都放进formData中
          for(i in fileobj){
               formData.append("imgpath"+[i], fileobj[i]);
            }
          var postdata=formData
          mui.showLoading("正在加载..","div")
          $.ajax({
            type: "post",
            url: '放你都请求地址',
            data: postdata,
            processData: false,
            contentType: false, 
            success: function(data) {
			    mui.hideLoading();
              if(data.code==1){
                  	mui.toast('提交成功',{ duration:'long', type:'div' })
                  	parent.layer.close(index);
                }
            }
          });
        });

原创希望大家支持
具体就是这样啦，如果大家有更好的办法，希望不令赐教。。。。。。