Мультизагрузка картинок
 

Доброго дня всем

Есть форма и инпут типа 'file' с атрибутом 'multiple'. Также имется предпросмотр выбранных картинок.

Когда юзер выбирает сразу несколько изображений, то они все попадают в массив $_FILES и все работает нормально.

Но если юзер выбирает одну картинку, закрывает окно выбора, потом следующую и т.д., то в массив $_FILES попадает последняя. При этом в окне предпросмотра все они показываются нормально.

Такой вопрос - как их объединить, чтобы все работало так, как будто выбираются сразу несколько файлов?

Код предпросмотра

window.onload = function(){
        
    //Check File API support
    if(window.File && window.FileList && window.FileReader){
        var filesInput = document.getElementById("files");
        
        filesInput.addEventListener("change", function(event){
            
            var files = event.target.files; //FileList object
            var output = document.getElementById("result");
            
            for(var i = 0; i< files.length; i++){
                var file = files[i];                
                //Only pics
                if(!file.type.match('image'))
                  continue;
                
                var picReader = new FileReader();
                
                picReader.addEventListener("load",function(event){                    
                    var picFile = event.target;
                    var div = document.createElement("div");
                    div.className = 'img_preview';
                    div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                            "title='" + picFile.name + "'/>";                    
                    output.insertBefore(div,null); 
                    
                
                });                
                 //Read the image
                picReader.readAsDataURL(file);
            }                               
           
        });
    }
    else
    {
        console.log("Your browser does not support File API");
    }
}

Спасибо

Нужно удалять все превью, когда пользователь просто закрывает окно выбора файла, т.к. все выбранные до этого файлы "сбрасываются".
После строки 11:

if(!files.length)
    output.innerHTML='';

Вставил после 11-й строки, все осталось по-прежнему

Nexus,
похоже вопрос в том как отправить ВСЕ картинки из output на сервер?

Они и отправляются, но если выбирать кучей. А если по одной добавлять, то отправляется последняя

<input type="file" multiple id="files" accept="image/*"/>
<div id="result"></div>
<style>.thumbnail{max-width:100px;}</style>
<script>
(function(){
  if(!window.File || !window.FileList || !window.FileReader) 
    return console.log("Your browser does not support File API");

  document.getElementById("files").addEventListener("change", function(event) {
    var files = event.target.files,
        output = document.getElementById("result");

    output.innerHTML = '';
    for(var i = 0; i < files.length; i++) {
      var file = files[i];
      if(!file.type.match('image')) 
        continue;

      var picReader = new FileReader();
      picReader.addEventListener("load", function(event) {
        var picFile = event.target;
        var div = document.createElement("div");
        div.className = 'img_preview';
        div.innerHTML = "<img class='thumbnail' src='" 
          + picFile.result + "'" + "title='" + picFile.name + "'/>";
        output.insertBefore(div, null);
      });
      picReader.readAsDataURL(file);
    }
  });
})();
</script>

Сейчас скрипт работает правильно, он всегда отрисовывает только действительно выбранные изображения, которые и будут отправлены на сервер.

Чтобы реализовать возможность последовательного/поочередного выбора изображений для загрузки нужно либо сохранять выбранные пользователем изображения в переменной и отправлять их на сервер скриптом, либо каждый раз клонировать поле выбора файла (в этом случае обработчик лучше делегировать ближайшему родителю).

рони, вероятно вы правы.

И оставить пользователя без памяти. )

LingVist,
копайте в сторону FormData

Угу, как ни посмотри - наиболее геморойный вариант.

Теоретически должно работать.

<div id="files">
  <input type="file" multiple accept="image/*"/>
</div>
<div id="result"></div>
<style>
  .img_preview{display:inline-block;}
  .thumbnail{max-width:100px;}
  #files input{display:none;}
  #files input:last-child{display:block;}
</style>
<script>
(function(){
  if(!window.File || !window.FileList || !window.FileReader)
    return console.log("Your browser does not support File API");

  document.getElementById("files").addEventListener("change", function(event) {
    var clone = event.target.cloneNode(),
        files = event.target.files,
        output = document.getElementById("result");

    clone.value=null;
    this.appendChild(clone);
    this.focus();
    for(var i = 0; i < files.length; i++) {
      var file = files[i];
      if(!file.type.match('image'))
        continue;

      var picReader = new FileReader();
      picReader.addEventListener("load", function(event) {
        var picFile = event.target;
        var div = document.createElement("div");
        div.className = 'img_preview';
        div.innerHTML = "<img class='thumbnail' src='"
          + picFile.result + "'" + "title='" + picFile.name + "'/>";
        output.insertBefore(div, null);
      });
      picReader.readAsDataURL(file);
    }
  });
})();
</script>

Вроде бы как проблема и так понятна - поле с мультивыбором, но это не означает, что оно запомнит все последовательные выборы. Так что проблема не в том как отправить, а в "борьбе с естественны". )

Drag & drop для поля с мультивыбором при выборе из разных каталогов, иначе никак.

а в чём? разве нельзя добавить несколько картинок в FormData из output и отправить ajax

Как base64?

Скорее всего файл не будет кодироваться в base64.
https://developer.mozilla.org/ru/doc...% D0%B8%D1%81

Это почему?

picReader.readAsDataURL(file);

Взять из src base64 и отправить можно. Но это будет объем в три раза меньше разрешенного сервером, и это будут данные в $_POST.

FormData.append может принимать в кач-ве значения экземпляр класса File.
Сервер, по идее, должен получить файл не в глобальном объекте _post, но _files.

Какой file, если речь об output, который html? )

laimas, виноват, упустил упоминание "output" в посте рони.

Nexus,
можно и файлом передать, но для этого надо обратное - base64 -> Blob. А вот стоит ли это делать вместо добавления нового поля, это уже вопрос философский. )

Возможно я вас увёл в сторону, FormData.append все files (не знаю формат) дополнять при каждом change, а не из output.

рони,
можно, но в этом случае нужно решать и вопросы связанные с отказом загружать что-то из ранее выбранного.

laimas, по-моему это не такой уж и философский вопрос.
Декодирование base64 займет некоторое время, так и нагрузит устройство пользователя.
А плюсы этого деяния весьма сомнительны, т.к. нет никаких трудностей в том, чтобы на сервере обработать файл как post, либо, как вы и написали, просто добавить новое поле, которое избавит от дополнительных манипуляций (это, конечно, если синхронный запрос устраивает).

:yes:

:write:
https://developer.mozilla.org/ru/doc...ormData/delete

рони, FormData в памяти устройства же будет храниться?
Т.е. данные будут как в base64 в src preview, так и в объекте FormData единовременно?

Да, это не проблема, но есть одна неприятность в этом. Например, если сервером определено, что макс. размер загружаемого файла не более 2 МБ, то при загрузке файла как base64 это ограничение легко обойти.

рони,
ну так надо связывать каждый отображаемый эскиз в output с данными в FormData. Именовать каждый элемент в наборе уникальным именем, это значит усложнить обработку на сервере. Работать с индексным набором, придется следить что имеется уже (имя поля ввода обязательно должно отражать массив - name[], в противном случае РНР отдаст последний в наборе файл).

laimas, проверить размер файла перед сохранением все же можно.

Уже поздно, он уже на сервере и в тройном размере.

не знаю

laimas, в php есть директива "post_max_size".
Правда как поступит сервер, если клиент превысит этот лимит я не знаю.

Nexus, предложенный Вами вариант также не работает, передается пустой массив.
В обработчике РНР для загрузки файлов в папку я использую цикл

$array = array();
        
        foreach ($request->file() as $file) {
            foreach ($file as $img) {
                $img->move(public_path().'/'.env('THEME').'/images/estate/'.$upload_dir, date('dmY_Hi').'_'.$img->getClientOriginalName());
                $img = date('dmY_Hi').'_'.$img->getClientOriginalName();	
                
                array_push($array, $img);
                }
            }

В массив $array добавляются имена изображений, потом закидываю их в БД одной строкой.

Может подобным образом можно создать массив и с самими картинками? Только как это сделать технически, я не знаю

LingVist, вы имя инпуту указали?

upd.
А вы уверены, что клиент прислал изображения? :)

Это общий размер POST данных разрешенных для загрузки и этот размер должен быть больше чем общее разрешенное для загрузки количества файлов (по умолчанию 20) помноженные на разрешенный размер одного файла (по умолчанию 2 МБ), который никак не влияет на размер не бинарных данных.

laimas,
Вы имели ввиду, что серверу может не хватить памяти для обработки запроса из-за чрезмерного размера изображения.
Я верно понял?

Я имел ввиду ограничение, а по каким соображениям оно накладывается, это резиновый вопрос. )

Да, с инпутом промашка вышла. Сейчас все работает нормально, большое Вам спасибо!

FileReader здесь не нужен. Правильнее использовать URL.createObjectURL, и не забыть про URL.revokeObjectURL.

Итого, никакого base64 тут не надо. Т.е. не будет копии файла в оперативной памяти.

Все выбираемые файлы складывать в массив, потом из этого массива добавить в FormData перед отправкой.