JQuery - Drag n Drop Files - Как получить информацию о файле?

Question

Заинтересован в создании собственного загрузчика файлов drag'n'drop с использованием JQuery / AJAX / PHP.

По сути, я хочу загрузить файл, чтобы пользователи моего сайта могли просто перетащить файл со своего компьютера в созданный мной div, и он затем загрузит файл для них в выбранное место назначения.

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

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

UPDATE Итак, я понял, как делать то, что я хочу. Просто установите непрозрачность поля ввода файла на 1, чтобы он был скрыт, и вы все равно можете перетащить файл в эту общую область, и если вы нажмете на текстовое поле, он поймает его. ОДНАКО, я хотел бы знать, как увеличить высоту / ширину в поле ввода файла (пробовал базовый CSS для файла, но он только увеличивает размер кнопки «обзор», а не фактическое поле, куда вы можете поместить файл. Есть идеи, как это сделать? Я в основном хочу большой квадратный div с надписью «Drop file here». Поэтому мне нужно изменить размер поля ввода.

Answer 1

Вы можете использовать события HTML5 dragenter и dragleave для создания зоны сброса.
Затем, поместив файл ввода в зону сброса и скрыв его с помощью CSS, вы можете загрузить файл, когда changeсобытие для входных сигналов, как это

var dropzone = $("#dropzone"),
    input    = dropzone.find('input');

dropzone.on({
    dragenter : dragin,
    dragleave : dragout
});

input.on('change', drop);

function dragin(e) { //function for drag into element, just turns the bix X white
    $(dropzone).addClass('hover');
}

function dragout(e) { //function for dragging out of element                         
    $(dropzone).removeClass('hover');
}

function drop(e) {
    var file = this.files[0];
    $('#dropzone').removeClass('hover').addClass('dropped').find('img').remove();

    // upload file here
}

FIDDLE

Answer 2

Просто чтобы поболтать здесь, как я делал это также последние пару дней.Из того, что я понимаю, если вы связываете событие отбрасывания через jQuery, вам нужно получить доступ к этому объекту event.dataTransfer, пройдя через объект event.originalEvent в событии, предоставленном jQuery.

Пример:

В этом я связываюсь как с событиями dragover, так и drop, так как это было необходимо для предотвращения выполнения действия по умолчанию (здесь найдено это решение: Запрет действия по умолчанию. Работает только в Chrome)

$('#dropzone').bind('dragover drop', function(event) {
    event.stopPropagation(); 
    event.preventDefault();
    if (event.type == 'drop') {
        console.log(event.originalEvent.dataTransfer.files);
    }
});

Также, похоже, есть ошибка, при которой, если вы console.log() массив event.dataTransfer (или event.originalEvent.dataTransfer), его файл пуст, он указан здесь: event.dataTransfer.files пусто, когда ondrop запущено?

Чтобы лучше ответить на вопрос OPs (я только что заметил остальную часть, и я знаю, что он старый, но кто-то может найти это полезным):

Моя реализация в jQuery, так что я надеюсь, что все в порядке:

var files = [];

// Attaches to the dropzone to pickup the files dropped on it. In mine this is a div.
$("#dropzone").bind('dragover drop', function(event) {
    // Stop default actions - if you don't it will open the files in the browser
    event.stopPropagation();
    event.preventDefault();

    if (e.type == 'drop') {
        files.push(event.originalEvent.dataTransfer.files);
    }
});

// Attach this to a an input type file so it can grab files selected by the input
$("#file-input").bind('change', function(event) {
    files.push(event.target.files);
});

// This is a link or button which when clicked will do the ajax request 
// and upload the files
$("#upload-button").bind('click', function(event) {
    // Stop the default actions
    event.stopPropagation();
    event.preventDefault();

    if (files.length == 0) {
        // Handle what you want to happen if no files were in the "queue" on clicking upload
        return;
    }

    var formData = new FormData();
    $.each(files, function(key, value) {
        formData.append(key, value);
    });

    $.ajax({
        url: 'upload-ajax',
        type: 'POST',
        data: formData,
        cache: false,
        dataType: 'json',
        processData: false, // Don't process the files - I actually got this and the next from an SO post but I don't remember where
        contentType: false, // Set content type to false as jQuery will tell the server its a query string request
        success: function(data, textStatus, jqXHR) { /* Handle success */ },
        error: function(jqXHR, textStatus, errorThrown) { /* Handle error */ }
    });

});

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

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

Answer 3

Для тех, кто заинтересован, я нашел этот учебник / демонстрацию полезным: http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/

В основном использует <span> для покрытия поля ввода по умолчанию.