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.createObjectURL(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.createObjectURL(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('服务器发生错误！');
        }
    })

})