VicTHOR
@VicTHOR
(╮°-°)╮┳━━┳ ( ╯°□°)╯ ┻━━┻

Как связать добавление файлов по клику с добавлением перетаскиванием?

Есть функция, которая перебирает каждый инпут для добавления (они скрыты, работает клик по лейблу)
$('input[type="file"]').each(function () {
  $(this).on("click", function (e) {
    if ($(this).parent().hasClass("label_disable")) {
      e.preventDefault();
    }
  })
  $(this).on('change', function () {
    let form_data = new FormData();
    let key = $(this).attr("name");
    let files = $(this)[0].files;

    $.each(files, function() {
      form_data.append(key, this);
    })

    $.ajax({
      url: 'addPhotos.php',
      dataType: 'text',
      data: form_data,
      type: 'POST',
      cache: false,
      contentType: false,
      processData: false,
      success: function (response) {
        alert(response);
      }
    })
  })
})

Как вызвать изменения инпута (добавить ему файлы), перетащив файлы, а не кликнув?
Что-бы работало и так и так..
Т.е нажал на лейбл - выбираешь файлы. Выбрал - у инпута появились файлы. Нужно добавить "перетащил на лейбл - у инпута появились файлы".
  • Вопрос задан
  • 192 просмотра
Решения вопроса 2
Speik
@Speik
Developing is on way
Ну как-то так
$(document).ready(function()
{
    'use strict';

    let fileInput     = $('input[type="file"]'),
        inputLabel    = $('.addFiles__label'),
        uploadedFiles = new FormData();

    fileInput.on('click', function()
    {
        if( $(this).parent().hasClass('label_disable') )
        {
            e.preventDefault();
        }
    })
    .on('change', function()
    {
        let key = $(this).attr('name'),
            files = $(this)[0].files;

        $.each(files, function()
        {
            uploadedFiles.append( key, this );
        });

        sendAjax('addPhotos.php', uploadedFiles);
    })

    inputLabel.on('drag dragstart dragend dragover dragenter dragleave drop', function(e)
    {
        e.preventDefault();
        e.stopPropagation();
    })
    .on('dragover dragenter', function()
    {
        $(this).addClass('is-dragover');
    })
    .on('dragleave dragend drop', function()
    {
        $(this).removeClass('is-dragover');
    })
    .on('drop', function( e )
    {
        let files = e.originalEvent.dataTransfer.files,
            targetInput = $(this).find('input[type="file"]'),
            key = targetInput.attr('name');

        $.each(files, function()
        {
            uploadedFiles.append( key, this );
        });

        sendAjax('addPhotos.php', uploadedFiles);
    });

    function sendAjax(serverURL, formData)
    {
        $.ajax({
            url: serverURL,
            dataType: 'text',
            data: formData,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,
            success: function( response )
            {
                alert(response);
            }
        });
    }

});


Ну и стили, соответственно
.addFiles__label {
	transition: .3s ease;
}

.is-dragover {
	background-color: rgba(0, 0, 0, .3);
}
Ответ написан
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
вот, форму вытащил и код для кнопок, стили для всей страницы

1. Чтобы отловить событие drop на элементе input вам надо сам input переместить на передний план.
Изменение css для блока .addFiles__input на строке 292
2. Далее установите обработчик для события drop в js (изменённые участки прокомментировал в коде)

Итоговый вариант будет выглядеть примерно так:
https://codepen.io/anon/pen/wLwjLa?editors=0110
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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