Заинтересован в создании собственного загружаемого файла файла drag'n'drop с использованием JQuery / AJAX / PHP.
В принципе, я хочу загрузить файл-загрузчик, чтобы пользователи моего сайта могли просто перетащить файл со своего компьютера в созданный мной div, и затем он загрузит файл для них в выбранное место назначения.
Я хотел бы построить это с нуля и не использовать никаких плагинов, чтобы я мог лучше манипулировать ограничениями (типами файлов, размерами, папками назначения и т. Д.),
Выучили Google без везения, только плагины. Может в любом случае меня направить в правильном направлении?
UPDATE Итак, я понял, как делать то, что хочу. Просто установите непрозрачность поля ввода файла на 1, чтобы он был скрыт, и вы все равно можете перетащить файл в эту общую область, и если вы попадете в текстовое поле, оно поймает его. ОДНАКО, я хотел бы знать, как увеличить высоту / ширину в поле ввода файла (пробовал базовый css в файле, но он только увеличивает размер кнопки «просмотр», а не фактическое поле, в которое вы можете вставить файл. Любые идеи, как это сделать? В основном я хочу большой квадрат div, в котором говорится «Отбросьте файл здесь». Поэтому мне нужно изменить размер поля ввода.
Вы можете использовать события 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 }
FIDDLE
Просто, чтобы перезвонить здесь, поскольку я делал это также последние пару дней. Из того, что я понимаю, если вы связываете событие drop через jQuery, вам нужно получить доступ к этому объекту event.dataTransfer , пройдя через объект event.originalEvent в событии, предоставленном jQuery.
Пример:
В этом я связываюсь как с dragover так и с событиями dragover , поскольку это было необходимо для предотвращения его выполнения действия по умолчанию (найдено это решение здесь: Предотвратить действие по умолчанию. Работа только в хроме )
$('#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 */ } }); });
Вы также можете привязываться к другим событиям в принятом ответе для выполнения эффектов, например, чтобы вырезать dropzone, чтобы вы могли видеть это (это в моем списке задач для моей библиотеки). Тем не менее, это ядро фактической загрузки файла ajax.
У меня на самом деле нет удобного способа проверить это, но это по существу то, как я это сделал (я, по сути, взял весь этот код из библиотеки, которую я создавал, и адаптировал ее, чтобы она соответствовала общему блоку кода здесь в простой понять способ). Надеюсь, это поможет некоторым людям. Начиная с этого момента на самом деле было очень легко идти вперед и добавлять в список очереди файлов, с возможностью удалять файлы из очереди, поэтому это должно быть довольно хорошей отправной точкой.
Для тех, кого это интересует, я нашел этот учебник / демонстрацию полезным: http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/
В основном используется <span> для покрытия поля ввода по умолчанию.