Блог

Я знаю, что этот вопрос часто возникает, но я не могу найти правильное решение, читая все сообщения о Fetch и FormData :

У меня есть много псевдоформ, написанных на JS в разных форматах, для загрузки изображений с помощью уникальной общей функции

  function uploadImage(ref,rep,int,num,typ,div){  
    
 let form = '<span class="uploader">';
     form = '<input id="rep-' num '" value="' rep '"><br>'; // upload directory
     form = '<input id="ref-' num '" value="' ref '"><br>'; // image name to use
     form = '<input id="typ-' num '" value="' typ '"><br>'; // type of image
     form = '<input id="div-' num '" value="' div '"><br>'; // where to display it once loaded on server
     form = '<input type="file" class="fileimg" id="file-' num '">';
     form = '<button onclick="saveImage(' num ')">' int '</button>'; 
     form = '</span>';
    
     return form
 }
 

код, вызывающий функцию для 1-го изображения:

  document.getElementById('img-1').innerHTML = uploadImage('name-of-the-image','dir-to-put-the-file/','ADD AN IMAGE HERE',1,0,'img-1'));  
 

а теперь JS для загрузки img на сервер:

  function saveImage(n) {

   let rep = document.getElementById('rep-' n).value, // dir
       ref = document.getElementById('ref-' n).value, // name
       typ = document.getElementById('typ-' n).value, // type
       div = document.getElementById('div-' n).value; // div.id

   const url = "upload-imgs.php?imgname=" ref "amp;directory=" rep "amp;typeimg=" typ
   const files = document.querySelector('[type=file]').files;
   formData = new FormData();

   for (let i = 0; i < files.length; i  ) {
      let file = files[i];
      console.log('FILE = ' file.name);
      formData.append('image', file);
   }

   fetch(url, {
      method: 'POST',
      body: formData
   }).then(response => {
      if( response.status==200 amp;amp; response.ok == true) {
        return response.text().then( text => displayIf(text) )
      }
   });

 }
 

PHP напишите изображение с правильным именем в нужном месте в зависимости от правильного типа изображения (фотография, график, план,…), затем вернитесь echo $dir.$new_name , и функция displayIt(img) покажет новое изображение в нужном div

Он отлично работает, но только для первого загруженного изображения. Я думаю, что проблема исходит от FormData, которая должна быть сброшена, но, несмотря на тестирование различных возможностей, я не могу найти подходящую:

     if( response.status==200 amp;amp; response.ok == true) {
        return response.text().then( text => displayIt(text) )
        formData.delete('image'); // log :  unreachable code after return statement
    }
 

Добавление formData.reset() вместо этого или в displayIt(img) функцию не решает проблему: тот же журнал. Где я ошибаюсь?