Как поместить массив в input type = file?

Question

[Alex Mirgorodskiy]

Всем привет, есть задача, при добавлением товара на сайт, добавить главную картинку(вопросов нет) и 5 дополнительных. При этом естественно с предварительным просмотром и возможностью удалять любую из добавленных перед передачей на сервер. Нашел статейку где это в целом круто реализовано, но есть одно но. Там как-то через AJAX просто в php файл передается все, а у меня на yii2 весь сайт, ну и AJAX мне как-то не нужен. В статье все изображения что были загружены в форму помещается в массив, как мне этот массив с изображениями правильно поместить в

<input type="file" id="uploadbtn" class="upload_gall" name="Product[gallery][]" multiple="" accept="image/*">

там дальше уже сложностей не возникнет. Не подскажите? Не очень корявое решение ли это?

Comments

[Alex Mirgorodskiy]

Да, а это что-то меняет?

Answer 1

[Stalker_RED]

Никак, к FileList доступ readonly.
Придется вам освоить ajax или делать что-то вроде этого Как используя js/jq загрузить в input file файлы не за 1 раз, а за несколько?

Comments

[Alex Mirgorodskiy]

Можно странный вопрос, в JS не рулю особо, по этому даже уровня глупости вопроса не понимаю)) Вот в этом коде (со статьи который) автор собирает все что в первью пользователь накликал в массив dataArray. Че он туда насобирал? Это обьекты? или пути к файлам или их названия? Короче суть вопроса, могу ли я с тем что передал AJAX-ом(dataArray) работать в php контроллере, сохранить изображения в папку?

// В dataTransfer помещаются изображения которые перетащили в область div
           jQuery.event.props.push('dataTransfer');

           // Максимальное количество загружаемых изображений за одни раз
           var maxFiles = 5;

           // Оповещение по умолчанию
           var errMessage = 0;

           // Кнопка выбора файлов
           var defaultUploadBtn = $('#uploadbtn');

           // Массив для всех изображений
           var dataArray = [];

           // Область информер о загруженных изображениях - скрыта
           $('#uploaded-files').hide();

           // Метод при падении файла в зону загрузки
           $('#drop-files').on('drop', function(e) {
               // Передаем в files все полученные изображения
               var files = e.dataTransfer.files;
               // Проверяем на максимальное количество файлов
               if (files.length <= maxFiles) {
                   // Передаем массив с файлами в функцию загрузки на предосмотр
                   loadInView(files);
               } else {
                   alert('Вы не можете загружать больше '+maxFiles+' изображений!');
                   files.length = 0; return;
               }
           });

// Функция загрузки изображений на предросмотр
           function loadInView(files) {
               // Показываем обасть предпросмотра
               $('#uploaded-holder').show();

               // Для каждого файла
               $.each(files, function(index, file) {

                   // Несколько оповещений при попытке загрузить не изображение
                   if (!files[index].type.match('image.*')) {

                       if(errMessage == 0) {
                           $('#drop-files p').html('Эй! только изображения!');
                           ++errMessage
                       }
                       else if(errMessage == 1) {
                           $('#drop-files p').html('Стоп! Загружаются только изображения!');
                           ++errMessage
                       }
                       else if(errMessage == 2) {
                           $('#drop-files p').html("Не умеешь читать? Только изображения!");
                           ++errMessage
                       }
                       else if(errMessage == 3) {
                           $('#drop-files p').html("Хорошо! Продолжай в том же духе");
                           errMessage = 0;
                       }
                       return false;
                   }

                   // Проверяем количество загружаемых элементов
                   if((dataArray.length+files.length) <= maxFiles) {
                       // показываем область с кнопками
                       $('#upload-button').css({'display' : 'block'});
                   }
                   else { alert('Вы не можете загружать больше '+maxFiles+' изображений!'); return; }

                   // Создаем новый экземпляра FileReader
                   var fileReader = new FileReader();
                   // Инициируем функцию FileReader
                   fileReader.onload = (function(file) {

                       return function(e) {
                           // Помещаем URI изображения в массив
                           dataArray.push({name : file.name, value : this.result});
                           addImage((dataArray.length-1));
                       };

                   })(files[index]);
                   // Производим чтение картинки по URI
                   fileReader.readAsDataURL(file);
               });
               return false;
           }

// Процедура добавления эскизов на страницу
           function addImage(ind) {
               // Если индекс отрицательный значит выводим весь массив изображений
               if (ind < 0 ) {
                   start = 0; end = dataArray.length;
               } else {
                   // иначе только определенное изображение
                   start = ind; end = ind+1; }
               // Оповещения о загруженных файлах
               if(dataArray.length == 0) {
                   // Если пустой массив скрываем кнопки и всю область
                   $('#upload-button').hide();
                   $('#uploaded-holder').hide();
               } else if (dataArray.length == 1) {
                   $('#upload-button span').html("Был выбран 1 файл");
               } else {
                   $('#upload-button span').html(dataArray.length+" файлов были выбраны");
               }
               // Цикл для каждого элемента массива
               for (i = start; i < end; i++) {
                   // размещаем загруженные изображения
                   if($('#dropped-files > .image').length <= maxFiles) {
                       $('#dropped-files').append('<div id="img-'+i+'" class="image" style="background: #292929 url('+dataArray[i].value+') center center no-repeat; background-size: contain;"> <a href="#" id="drop-'+i+'" class="drop-button"></a></div>');
                   }
               }
               return false;
           }

// Загрузка изображений на сервер
           $('.btn-success').click(function() {

               
               // Показываем прогресс бар
               $("#loading").show();
               // переменные для работы прогресс бара
               var totalPercent = 100 / dataArray.length;
               var x = 0;
               
               $('#loading-content').html('Загружен '+dataArray[0].name);
               // Для каждого файла
               $.each(dataArray, function(index, file) {
                   // загружаем страницу и передаем значения, используя HTTP POST запрос
                   $.post('/main/test', dataArray[index], function(data) {


                       var fileName = dataArray[index].name;
                       ++x;

                       // Изменение бара загрузки
                       $('#loading-bar .loading-color').css({'width' : totalPercent*(x)+'%'});
                       // Если загрузка закончилась
                       if(totalPercent*(x) == 100) {
                           // Загрузка завершена
                           $('#loading-content').html('Загрузка завершена!');

                           // Вызываем функцию удаления всех изображений после задержки 1 секунда
                           setTimeout(restartFiles, 1000);
                           // если еще продолжается загрузка
                       } else if(totalPercent*(x) < 100) {
                           // Какой файл загружается
                           $('#loading-content').html('Загружается '+fileName);
                       }

                       // Формируем в виде списка все загруженные изображения
                       // data формируется в upload.php
                       var dataSplit = data.split(':');
                       if(dataSplit[1] == 'загружен успешно') {
                           $('#uploaded-files').append('<li><a href="images/'+dataSplit[0]+'">'+fileName+'</a> загружен успешно</li>');

                       } else {
                           $('#uploaded-files').append('<li><a href="images/'+data+'. Имя файла: '+dataArray[index].name+'</li>');
                       }

                       $('.ava_big_container').html(data);

                   });
               });
               // Показываем список загруженных файлов
               $('#uploaded-files').show();
               return false;
           });

[Stalker_RED]

Alex Mirgorodskiy,

Да, он отправляет их, и контроллер сможет их обработать.

$.each(dataArray, function ...
      $.post('/main/test', dataArray[index], ...

Почему-то отправляет по одному, но это уже как ему удобно.