How to collect all photos selected using different shapes?

Basitkhan Mansurov2018-06-25 16:50:16

PHP

Basitkhan Mansurov, 2018-06-25 16:50:16

There is a document where photos are dynamically inserted using different fields.
All photos are displayed using a function that reads the URl and outputs to the preview.

Everything works, but now I don’t know how to collect all the photos into a single array and transfer them to the server using ajax, or maybe not ajax. (It still goes to another page).

screenshoter.ru/i/250618/HEdW5W7O.jpg

Answer the question

In order to leave comments, you need to log in

1 answer(s)

ProjectSoft, 2018-06-25
@Basitkhan

It is not known what and how you have in terms of the logic of layout, forms, etc.
Therefore, the example is only for collecting all completed input files.
Using FormData

<!DOCTUPE HTML>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <input type="file"><br>
    <input type="file"><br>
    <input type="file"><br>
    <input type="file"><br>
    <input type="file"><br>
    <input type="file"><br>
    <input type="file"><br>
    <button id="click">Test</button>
    <script>
      var btn =document.getElementById('click');
      click.addEventListener('click', function(e){
        var files = document.querySelectorAll('input[type="file"]'),
          fd = new FormData();
        if(files){
          files.forEach(function(input, index, list){
            if(input.files.length){
              fd.append("filesUpload[]",input.files[0]);
            }
          });
        }
        // вывод для теста
        console.log(fd.getAll('filesUpload[]'));
        // Отправляем ajax
        // Повесить обработчики отправки!!!!
        var request = new XMLHttpRequest();
        request.open("POST", "http://localhost/submitform.php");
        request.send(fd);
      });
    </script>
  </body>
</html>