Перетаскивание загрузки файлов не работает в Firefox - PullRequest
Новая
       7

Перетаскивание загрузки файлов не работает в Firefox

0 голосов
/ 19 ноября 2018

Я пытаюсь интегрировать загрузку файлов с возможностью просмотра и перетаскивания на моем веб-сайте. Приведенный ниже вариант загрузки файла кода работает хорошо в 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;
}
<div id="uploader" onclick="$('#filePhoto').click()">
    <p> click here or drag here to upload image</p>
    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />
</div>
<input type="file" name="userprofile_picture" id="filePhoto" />
<button type="button" id="cancel_file" style="display: none;">Cancel</button>


<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

1 Ответ

0 голосов
/ 19 ноября 2018

Может быть imageLoader.files = files; не вызывать «событие изменения» в firefox, так что я вызвал событие изменения вручную в drop function, и оно работает для меня, вы можете попробовать это 

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;
    
    // Create a new 'change' event
    var event = new Event('change');
    // Dispatch it.
    imageLoader.dispatchEvent(event);

}
$('#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;
}
<div id="uploader" onclick="$('#filePhoto').click()">
    <p> click here or drag here to upload image</p>
    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />
</div>
<input type="file" name="userprofile_picture" id="filePhoto" />
<button type="button" id="cancel_file" style="display: none;">Cancel</button>


<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
...