我正在努力向我们的网站添加一项功能，允许用户通过将图像从桌面拖放到浏览器中来上传图像。我使用 div 创建了一个“拖放区”，为其指定了宽度和高度，并向其添加了 dragover 和 drop 事件监听器。它在 Chrome 和 Edge 中运行良好，但在 Firefox、IE 或 Opera 中不起作用。对于这三个浏览器，当我尝试将图像拖到浏览器中时，光标会变成一个带有斜线的圆圈，表示拖动操作将被取消。我知道我必须阻止浏览器默认设置，因为 Chrome 默认是复制图片地址并在新窗口中显示。我能够让它适用于 Chrome，但出于某种原因，我必须防止默认设置的代码不适用于其他 3 种浏览器。
代码如下:
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Image Uploader</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/StyleSheet.css" rel="stylesheet" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" defer></script>
<script src="script/JavaScript.js" defer></script>
</head>
<body>
<input type="file" id="file" name="files[]" multiple onchange="startRead()"/>
<div id="draghere">Drop Your files here <span id="mouseposition"></span></div>
<div id="op"></div>
</body>
</html>
CSS:
#draghere {
width: 50%;
height: 150px;
border: 1px solid lightgray;
font-size: 3em;
text-align: center;
padding-top: 50px;
}
JavaScript(使用 JQuery):
window.addEventListener("dragover", function (e) {
e = e || event;
e.preventDefault();
}, false);
window.addEventListener("drop", function (e) {
e = e || event;
e.preventDefault();
}, false);
// Fired when uploading an image using the input button
function startRead(evt) {
var file = document.getElementById("file").files[0];
if (file) {
if (file.type.match("image.*")) {
getAsImage(file);
alert("Name: " + file.name);
}
}
evt.stopPropagation();
evt.preventDefault();
}
// Fired when uploading an image using drag and drop
function startReadFromDrag(evt) {
var file = evt.dataTransfer.files[0];
if (file) {
if (file.type.match("image.*")) {
getAsImage(file);
$("#draghere").css("background-color", "");
}
}
evt.stopPropagation();
evt.preventDefault();
}
function docolorchange(evt) {
$("#draghere").css("background-color", "yellow");
}
function getAsImage(readFile) {
var reader = new FileReader();
reader.readAsDataURL(readFile);
reader.onload = addImg;
}
function addImg(imgsrc) {
// Display image
$("#op").prepend("<img src='" + imgsrc.target.result + "'/>");
// upload to server
}
// Add event Listeners to drop zone
var droppingDiv = document.getElementById("draghere");
droppingDiv.addEventListener("dragover", docolorchange, false);
droppingDiv.addEventListener("drop", startReadFromDrag, false);
我是否遗漏了一些允许我在 Firefox、IE 和 Opera 中进行拖放操作的东西？根据我对拖放 API 的了解，它应该适用于所有浏览器，但这不是我一直以来的体验。
提前致谢!
更新:真正奇怪的是，在我编写这段代码的那天，我在我提到的所有 5 种浏览器中对其进行了测试，并且它在所有这些浏览器中都有效。第二天，它在 IE、Edge 和 Opera 中停止工作。我没有更改任何一行代码!这让我觉得这是缓存的问题，所以我在每个浏览器上都清除了它，但仍然没有...
最佳答案
我刚刚在 Chrome、Firefox 和 Opera (Mac OS) 中尝试过，它在所有 3 个上都可以正常工作。
无论如何，输入文件的 HTML 标签可以通过拖放操作。因此，无需创建 div 并使用 JavaScript 处理所有事件，您只需设置输入样式即可直接从输入创建拖放框。然后拖放应该适用于所有浏览器。
关于javascript - 拖放图像上传不适用于某些浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42582252/