拖放文件上传在Firefox中不起作用

Question

我正在尝试将文件上传与网站中的“浏览和拖放”选项集成在一起。下面的代码文件上传选项在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>
   

Answer 1

可能是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>