拖放文件上传在 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>