files = {}; // для хранения файлов
var theInputFile = $('input[type="file"]'); // инпут с типом файл и атрибутом multiple
var dropZone = $('.dropZone');
ondragover,ondragleave // пропустим
//когда файл(-ы) перетащили и бросили
dropZone[0].ondrop = function(event){
event.preventDefault(); //отмена стандартных поведений браузера
event.stopPropagation(); //отмена стандартных поведений браузера
dropZone.removeClass('hovered'); // удаляем
dropZone.addClass('droped'); // и добавляем нужные классы
var dt = event.dataTransfer; // получаем
var dfiles = dt.files; // переносимые файлы
var dcount = dfiles.length; // получаем кол-во переносимых файлов
if(dcount<=fileLimit){ // если меньше или равно 3 (кол-во)
$('.totalPhotos span').text(dcount); // показываем кол-во юзеру
files = {}; // очищаем хранилище с файлами
theInputFile.val(''); //очищаем инпут file
$('.combineLoaded').empty(); // очищаем div, где будут отображаться превью файлов
theInputFile.files = dfiles; // попытка добавить инпут file все переносимые файлы (не работает)
var isSomeFileTooBig = Object.values(theInputFile.files).some(function(file){ //найти во всех файлах
return file.size > maxFileSize; //файл, превыщающий 4 мб
});
if(isSomeFileTooBig){ // если нашелся такой
$('.totalPhotos span').css('color', '#ff0000').text('0'); // то
files = {}; // очищаем хранилище файлов
theInputFile.val(''); // и инпут file
$('.combineLoaded').empty(); // и div для вывода превью файлов
return false; // далее делаем ничего
}
// а если нет файла больше чем 4 мб
else{
$.each(theInputFile.files, function(i, file){ // то перебираем каждый файл
var reader = new FileReader(); // читаем файл
reader.onload = function(e){
$('.combineLoaded').append('<div class="readUploadedFile ovh boxs posr"><div class="loadedImageName"><div class="fileName posr boxs ovh" title="'+ file['name'] +'">'+ file['name'] +'</div></div><img src="'+e.target.result+'" alt="'+ file['name'] +'" title="'+ file['name'] +'"></div>');
};
reader.readAsDataURL(file); // вывели превью файла с именем
});
}
}
else{
$('.totalPhotos span').css('color', '#ff0000').text('0'); // а если перетащили более 3 файлов то
files = {}; // очищаем хранилище
theInputFile.val(''); // очищаем инпут file
$('.combineLoaded').empty(); // очищаем div с превью
return false; // дальше делаем ничего
}
};
Что в итоге получается? При перетаскивании файлов отображается их превью и имена, все бы хорошо, но вот input file не добавляет в себя переносимые файлы. К сожалению.
То, что input file не добавляет в себя переносимые drag n drop файлы, проверил на php
if(empty($_FILES['file']['name'])){
echo json_encode(['error' => 'Не выбраны изображения для загрузки'], JSON_UNESCAPED_UNICODE);
exit;
}
В то же время если выбрать файлы путем клика на нативную кнопку "выбрать файл", все ок. Но вот с drag n drop засада. Есть ли способ решить проблему?
