blackseabreathe
@blackseabreathe
brackets

Есть ли способ добавить переносимые файлы drag n drop в input file?

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 засада. Есть ли способ решить проблему?
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
var theInputFile = $('input[type="file"]'); // Это не 1 элемент. А jquery коллекция.

Соответственно, чтобы напрямую назначить элементу значение свойства files, нужно выбрать этот элемент.

Если он у Вас 1, то так:
theInputFile[0].files = dfiles; // попытка добавить инпут file все переносимые файлы (должна работать)

Если несколько, то обернуть код выше в $.each
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы