В настоящее время я пытаюсь создать загрузчик с перетаскиванием файлов со стандартной опцией, чтобы просто использовать обычный ввод.Я не уверен, какой целевой таргетинг писать, если пользователь щелкнул по загрузке или уронил файл.
Моей первой мыслью было проверить, пуст ли FileList, но оба способа создают FileList.Вторая мысль состояла в том, чтобы просто написать две функции, одну для ввода и одну для отбрасывания, но, похоже, я бы повторил.Последней мыслью было написание оператора if в функции read_file.Тем не менее, я не уверен, что именно нацеливаться.
Любые идеи будут с благодарностью!спасибо !!
https://jsfiddle.net/nick1572/b4xzt8oh/3/
var uploader = document.querySelector('.uploader');
var output = document.getElementById('output');
var file = document.getElementById('file');
file.addEventListener('change', function(event) {
read_file(event);
});
function read_file(event) {
file = event.target;
var reader = new FileReader();
reader.onload = function() {
var data_url = reader.result;
output.src = data_url;
};
// This will read when the image is dropped.
//reader.readAsDataURL(event.dataTransfer.files[0]);
reader.readAsDataURL(file.files[0]);
/*
Something like this
if () {
reader.readAsDataURL(file.files[0]);
} else if() {
reader.readAsDataURL(event.dataTransfer.files[0]);
}
*/
};
uploader.addEventListener('dragover', function(e) {
console.log('drag over');
e.preventDefault();
});
uploader.addEventListener('dragenter', function(e) {
console.log('drag enter');
e.preventDefault();
});
uploader.addEventListener('dragleave', function() {
console.log('drag leave');
});
uploader.addEventListener('drop', function(event) {
console.log('drop');
event.preventDefault();
read_file(event);
});