Я могу перетащить файл или щелкнуть простой входной файл в 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