Перетащите файл на меткуJquery

Программирование на jquery
Ответить Пред. темаСлед. тема
Anonymous
 Перетащите файл на метку

Сообщение Anonymous »

Мне снова нужна ваша помощь

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

Код: Выделить всё

$(document).on('dragenter', '#image-event-label', function() {
$(this).css('border', '1px solid #B8A1F5');
return false;
});

$(document).on('dragover', '#image-event-label', function(e){
e.preventDefault();
e.stopPropagation();
$(this).css('border', '1px solid #B8A1F5');
return false;
});

$(document).on('dragleave', '#image-event-label', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).css('border', '1px solid #422B7E');
return false;
});

$(document).on('drop', '#image-event-label', function(e) {
if(e.originalEvent.dataTransfer){
if(e.originalEvent.dataTransfer.files.length) {
e.preventDefault();
e.stopPropagation();
$(this).css('border', '1px solid #0F0');
upload(e.originalEvent.dataTransfer.files);
}
}
else {
$(this).css('border', '1px solid #422B7E');
}
return false;
});

function upload(files) {
var f = files[0] ;
var reader = new FileReader();
reader.onload = function (event) {
$('#image-event').val(event.target.result);
}
reader.readAsDataURL(f);
}

Код: Выделить всё

Import an image


Заранее всем спасибо!

Подробнее здесь: https://stackoverflow.com/questions/499 ... e-on-label
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • Перетащите изображение на метку, чтобы разместить или нарисовать другую метку pyqt5
    Anonymous » » в форуме Python
    0 Ответы
    116 Просмотры
    Последнее сообщение Anonymous
  • Перетащите файл на метку
    Anonymous » » в форуме Jquery
    0 Ответы
    9 Просмотры
    Последнее сообщение Anonymous
  • Перетащите файл с помощью Filedrop HTML 5 Jquery
    Anonymous » » в форуме Jquery
    0 Ответы
    19 Просмотры
    Последнее сообщение Anonymous
  • Рабочий стол WinUI 3: перетащите файл из проводника в окно приложения.
    Anonymous » » в форуме C#
    0 Ответы
    10 Просмотры
    Последнее сообщение Anonymous
  • Рабочий стол WinUI 3: перетащите файл из проводника в окно приложения.
    Anonymous » » в форуме C#
    0 Ответы
    9 Просмотры
    Последнее сообщение Anonymous

Вернуться в «Jquery»