js formData图片上传（单图上传、多图上传）后台java

单图上传

<div class=\"imgUp\">
     <label>头像单图</label>
     <input type=\"file\" name=\'photo\' class=\"mui-input-clear\" id=\'upimg\' style=\"opacity: 0;\" >
      <img src=\"images/up.png\" alt=\"\" id=\'imgContent\'>
</div>

js

$(\'#upimg\').on(\'change\',function(){                                                 //选中图片后展示在页面
    var filePath = $(this)[0].files[0].name //获取到input的value，里面是文件的路径
   //console.log(filePath) //1.png
   fileFormat = filePath.split(\'.\')[1].toLowerCase()
   //console.log(fileFormat) //png
   src = window.URL.create URL(this.files[0]) //转成可以在本地预览的格式
   //console.log(src) //blob:null/11ea5a2d-7270-4035-b5c4-4e50c5c061e7

  // 检查是否是图片
  if( !fileFormat.match(/png|jpg|jpeg/) ) {
      alert(\'上传错误,文件格式必须为：png/jpg/jpeg\')
     return
  }

$(\'#imgContent\').attr(\'src\',src)

})

多图上传

<div class=\"imgUp1\">
    <label>详情页多图</label>
    <input type=\"file\" class=\"mui-input-clear\" id=\"upimg1\" multiple style=\"opacity: 0;\">
    <img src=\"images/up.png\" alt=\"\" id=\'imgContent1\'><br>
    <div id=\"previewImg\">
           
    </div>
</div>

js

var fileall = []  //存放图片的容器

$(\'#upimg1\').on(\'change\', function(){
     var imgFiles = $(this)[0].files
     for (i=0;i<imgFiles.length;i++){
              filePath = imgFiles[i].name
              fileFormat = filePath.split(\'.\')[1].toLowerCase()
              src = window.URL.create URL(imgFiles[i])
              if( !fileFormat.match(/png|jpg|jpeg/) ) {
                    alert(\'上传错误,文件格式必须为：png/jpg/jpeg\')
                    return
              }
             var preview = document.getElementById(\"previewImg\")
             var img = document.createElement(\'img\')
             img.width = 120
             img.src = src
             preview.prepend(img)

            fileall.push($(\"#upimg1\")[0].files[0])
            console.log(fileall)

})

点击提交或者上传时

var formData1 = new FormData();

$(\"#submit\").click(function(){

    for(var i = 0;i<fileall.length;i++){
         formData1.append(\"img\",fileall[i]);
    }

   formData1.append(\"photo\", $(\"#upimg\")[0].files[0]);

   $.ajax({
        url: comPageUrl+\'/applyVote\',
        type: \'POST\',
        async:true,
        xhrFields:{
            withCredentials:true
         },
        contentType:false,
        processData:false,     //这个很有必要，不然不行
        dataType:\"json\",
        mimeType:\"multipart/form-data\",
        data: formData1,
        success: function(res){
                  console.log(res)
                 if(res.status==200){
                     alert(\"上传成功\")
                 }

        },
        error: function(){
               alert(\'服务器发生错误！\');
        }
    })

})