Перетащите файл на метку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 МБ.

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