无法读取图像（多次上传） php

问：

提交数据后，我从我的控制器 .php 文件中读取图像时遇到问题。

在UI方面，图像工作正常，它们在上传时可见，但如前所述，一旦我通过，我就会尝试读取未找到它们的值。

我正在尝试按名称读取文件img_name它似乎找不到它。谁能发现这是为什么？

先谢谢大家。

这是我的代码。

<script>
    console.clear();
('use strict');


(function () {

  'use strict';
  
  // Four objects of interest: drop zones, input elements, gallery elements, and the files.
  // dataRefs = {files: [image files], input: element ref, gallery: element ref}

  const preventDefaults = event => {
    event.preventDefault();
    event.stopPropagation();
  };

  const highlight = event =>
    event.target.classList.add('highlight');
  
  const unhighlight = event =>
    event.target.classList.remove('highlight');

  const getInputAndGalleryRefs = element => {
    const zone = element.closest('.upload_dropZone') || false;
    const gallery = zone.querySelector('.upload_gallery') || false;
    const input = zone.querySelector('input[type="file"]') || false;
    return {input: input, gallery: gallery};
  }

  const handleDrop = event => {
    const dataRefs = getInputAndGalleryRefs(event.target);
    dataRefs.files = event.dataTransfer.files;
    handleFiles(dataRefs);
  }


  const eventHandlers = zone => {

    const dataRefs = getInputAndGalleryRefs(zone);
    if (!dataRefs.input) return;

    // Prevent default drag behaviors
    ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
      zone.addEventListener(event, preventDefaults, false);
      document.body.addEventListener(event, preventDefaults, false);
    });

    // Highlighting drop area when item is dragged over it
    ;['dragenter', 'dragover'].forEach(event => {
      zone.addEventListener(event, highlight, false);
    });
    ;['dragleave', 'drop'].forEach(event => {
      zone.addEventListener(event, unhighlight, false);
    });

    // Handle dropped files
    zone.addEventListener('drop', handleDrop, false);

    // Handle browse selected files
    dataRefs.input.addEventListener('change', event => {
      dataRefs.files = event.target.files;
      handleFiles(dataRefs);
    }, false);

  }


  // Initialise ALL dropzones
  const dropZones = document.querySelectorAll('.upload_dropZone');
  for (const zone of dropZones) {
    eventHandlers(zone);
  }


  // No 'image/gif' or PDF or webp allowed here, but it's up to your use case.
  // Double checks the input "accept" attribute
  const isImageFile = file => 
    ['image/jpeg', 'image/png', 'image/svg+xml'].includes(file.type);


  function previewFiles(dataRefs) {
    if (!dataRefs.gallery) return;
    for (const file of dataRefs.files) {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = function() {
        let img = document.createElement('img');
        img.className = 'upload_img mt-2';
        img.setAttribute('alt', file.name);
        img.src = reader.result;
        dataRefs.gallery.appendChild(img);
      }
    }
  }

  
  const imageUpload = dataRefs => {

    // Multiple source routes, so double check validity
    if (!dataRefs.files || !dataRefs.input) return;

    const url = dataRefs.input.getAttribute('data-post-url');
    if (!url) return;

    const name = dataRefs.input.getAttribute('data-post-name');
    if (!name) return;

    const formData = new FormData();
    formData.append(name, dataRefs.files);

    fetch(url, {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      console.log('posted: ', data);
      if (data.success === true) {
        previewFiles(dataRefs);
      } else {
        console.log('URL: ', url, '  name: ', name)
      }
    })
    .catch(error => {
      console.error('errored: ', error);
    });
  }


  // Handle both selected and dropped files
  const handleFiles = dataRefs => {

    let files = [...dataRefs.files];

    // Remove unaccepted file types
    files = files.filter(item => {
      if (!isImageFile(item)) {
        console.log('Not an image, ', item.type);
      }
      return isImageFile(item) ? item : null;
    });

    if (!files.length) return;
    dataRefs.files = files;

    previewFiles(dataRefs);
    imageUpload(dataRefs);
  }

})();
</script>

        <h1 class="h4 text-center mb-3">Drag &amp; drop file upload example</h1>
    
<form action="Controller/createadcontroller.php" method="post">
    
      <fieldset class="upload_dropZone text-center mb-3 p-4">
    
        <legend class="visually-hidden">Image uploader</legend>
    
        <svg class="upload_svg" width="60" height="60" aria-hidden="true">
          <use href="#icon-imageUpload"></use>
        </svg>
    
        <p class="small my-2">Drag &amp; Drop background image(s) inside dashed region<br><i>or</i></p>
    
        <input id="upload_image_background" data-post-name="image_background" name="img_name" class="position-absolute invisible" type="file" multiple accept="image/jpeg, image/png, image/svg+xml" />
    
        <label class="btn btn-upload mb-3" for="upload_image_background">Choose file(s)</label>
    
        <div class="upload_gallery d-flex flex-wrap justify-content-center gap-3 mb-0"></div>
    
      </fieldset>
    
    
    
      <fieldset class="upload_dropZone text-center mb-3 p-4">
    
        <legend class="visually-hidden">Image uploader</legend>
    
        <svg class="upload_svg" width="60" height="60" aria-hidden="true">
          <use href="#icon-imageUpload"></use>
        </svg>
    
        <p class="small my-2">Drag &amp; Drop logo image(s) inside dashed region<br><i>or</i></p>
    
        <input id="upload_image_logo" data-post-name="image_logo" class="position-absolute invisible" type="file" multiple accept="image/jpeg, image/png, image/svg+xml" />
    
        <label class="btn btn-upload mb-3" for="upload_image_logo">Choose file(s)</label>
    
        <div class="upload_gallery d-flex flex-wrap justify-content-center gap-3 mb-0"></div>
    
      </fieldset>
    
    </form>
    
    
    <svg style="display:none">
      <defs>
        <symbol id="icon-imageUpload" clip-rule="evenodd" viewBox="0 0 96 96">
          <path d="M47 6a21 21 0 0 0-12.3 3.8c-2.7 2.1-4.4 5-4.7 7.1-5.8 1.2-10.3 5.6-10.3 10.6 0 6 5.8 11 13 11h12.6V22.7l-7.1 6.8c-.4.3-.9.5-1.4.5-1 0-2-.8-2-1.7 0-.4.3-.9.6-1.2l10.3-8.8c.3-.4.8-.6 1.3-.6.6 0 1 .2 1.4.6l10.2 8.8c.4.3.6.8.6 1.2 0 1-.9 1.7-2 1.7-.5 0-1-.2-1.3-.5l-7.2-6.8v15.6h14.4c6.1 0 11.2-4.1 11.2-9.4 0-5-4-8.8-9.5-9.4C63.8 11.8 56 5.8 47 6Zm-1.7 42.7V38.4h3.4v10.3c0 .8-.7 1.5-1.7 1.5s-1.7-.7-1.7-1.5Z M27 49c-4 0-7 2-7 6v29c0 3 3 6 6 6h42c3 0 6-3 6-6V55c0-4-3-6-7-6H28Zm41 3c1 0 3 1 3 3v19l-13-6a2 2 0 0 0-2 0L44 79l-10-5a2 2 0 0 0-2 0l-9 7V55c0-2 2-3 4-3h41Z M40 62c0 2-2 4-5 4s-5-2-5-4 2-4 5-4 5 2 5 4Z"/>
        </symbol>
      </defs>
    </svg>

读取上传的文件

echo $_FILES['img_name']['name']; 

它是打印空白的。