原生js jquery 实现图片上传功能 以及多图上传功能

1.单个图片上传以及预览功能

一个是选择图片的默认功能 一个是点击上传的逻辑

<input type="file" id="upLoad" name="imageUpLoad" class="editPos">
<input type="button" value="点击上传" class="upload">

const previewFile = document.querySelector('#upLoad')

// 图片预览功能
previewFile.addEventListener("change", function () {
 let reads = new FileReader();
 let f = previewFile.files[0]

    reads.readAsDataURL(f)
    reads.onload = function (e) {
  let img = document.querySelector('.avatar')
      img.src = e.target.result
    }
});



  // 图像上传功能
  $(".upload").click(function () {
      let formData = new FormData();
      formData.append("avatar", previewFile.files[0]);
      $.ajax({
          url: "/",
          type: "post",
          data: formData,
          contentType: false,
          processData: false,
          success: function (data) {
             alert("成功");
          },
          error: function () {
              alert("上传失败！");
          }
      });
  });

2. 多个图片上传以及预览功能

<div class="upload-photo">
  <div class="upload-photo-item">
    <img src="" class="img1" alt="">
    <img src="" class="img2" alt="">
    <img src="" class="img3" alt="">

  </div>
  <div class="upload-feedback">
    <img src="/static/images/btn-icon-addto-nor.png" alt="">
    <input type="file" class="imageUpLoad">
  </div>
</div>
<button class="submit">提交反馈</button>

js代码

const previewFiles = document.querySelector('.imageUpLoad')
const item = document.querySelector('.upload-photo-item')
const uploadPhoto = document.querySelector('.upload-feedback')
const img1 = document.querySelector('.img1')
const img2 = document.querySelector('.img2')
const img3 = document.querySelector('.img3')
let file1 = '';
let file2 = '';
let file3 = '';

previewFiles.addEventListener("change", function () {
  let reads = new FileReader();
  let f = previewFiles.files[0]
  item.style.display = 'flex'
  reads.readAsDataURL(f)
  reads.onload = function (e) {
    if(img1.style.display === '') {
      img1.src = e.target.result
      img1.style.display = 'block'
      file1 = f
    } else if(img2.style.display === '') {
      img2.src = e.target.result
      img2.style.display = 'block'
      file2 = f
    } else if(img3.style.display === '') {
      img3.src = e.target.result
      img3.style.display = 'block'
      file3 = f
      //关闭上传图片入口
      uploadPhoto.style.display = 'none'
    }
    console.log(file1)
    console.log(file2)
    console.log(file3)


  }
});

// 图像上传功能
$(".submit").click(function () {
  let formData = new FormData();
  formData.append("img1", file1);
  formData.append("img2", file2);
  formData.append("img3", file3);
  $.ajax({
    url: "",
    type: "post",
    data: formData,
    contentType: false,
    processData: false,
    success: function (data) {
      if (data) {
        location.reload(true)
      }
    },
    error: function () {
      alert("上传失败！");
    }
  });
});