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

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

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

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

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

обновление Ладно, я придумал, как делать то, что хочу. Просто установите непрозрачность поля ввода файла в 1, чтобы он был скрыт, и вы все равно можете перетащить файл в эту общую область, и если вы нажмете текстовое поле, оно его поймает. Тем не менее, я хотел бы знать, как увеличить высоту / ширину поля ввода файла (попробовал базовый css в файле, но он только увеличивает размер кнопки " Обзор и не фактическое поле, в которое вы можете поместить файл. Есть идеи, как это сделать? Я в основном хочу большой квадратный div, который говорит "Drop file here". Поэтому мне нужно изменить размер поля ввода.

10
ajax drag-and-drop file-upload jquery php

3 ответов

вы можете использовать HTML5 dragenter и dragleave события для создания dropzone.
Затем, поместив входной файл внутри dropzone и скрыв его с помощью 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
}

скрипка

6

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

4

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

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

1