Загрузка файла перетаскиванием не работает в FirefoxCSS

Разбираемся в CSS
Ответить
Anonymous
 Загрузка файла перетаскиванием не работает в Firefox

Сообщение Anonymous »

Я пытаюсь интегрировать загрузку файлов с опцией просмотра и перетаскивания на своем веб-сайте. Приведенная ниже опция загрузки файла кода хорошо работает в Chrome, но не работает в браузере Firefox. Я перепробовал много статей. Но я играю с этим. Кто-нибудь поможет мне решить эту проблему. Заранее спасибо.

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

var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
$('#uploader img').attr('src', event.target.result);
}
reader.readAsDataURL(e.target.files[0]);
$('#cancel_file').show();
}

var dropbox;
dropbox = document.getElementById("uploader");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}

function dragover(e) {
e.stopPropagation();
e.preventDefault();
}

function drop(e) {
e.stopPropagation();
e.preventDefault();
//you can check e's properties
//console.log(e);
var dt = e.dataTransfer;
var files = dt.files;

//this code line fires your 'handleImage' function (imageLoader change event)
imageLoader.files = files;
}
$('#cancel_file').click(function(e) {
$('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");
$('#cancel_file').hide();
});

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

#uploader {
position: relative;
overflow: hidden;
width: 300px;
height: 350px;
background: transparent;
border: 2px dashed #e8e8e8;
cursor: pointer;
padding: 5px;
color: #555;
font-family: 'Segoe UI';
font-weight: bold;
}
#uploader p {
padding: 30px;
text-align: center;
position: relative;
font-size: 25px;
color: #000;
top: 56px;
}
#filePhoto {
display: none;
}
#uploader img {
position: absolute;
width: 100%;
height: 362px;
top: -1px;
left: -1px;
z-index: -1;
border: none;
background-color: #eee;
}

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

 click here or drag here to upload image
[img]https://i.imgur.com/j0KblIu.png[/img]


Cancel





Подробнее здесь: https://stackoverflow.com/questions/533 ... in-firefox
Ответить

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

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

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

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

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