拖放图片上传无法在某些浏览器上运行

时间:2017-03-03 15:05:10

标签: javascript jquery html css drag-and-drop

我正在努力为我们的网站添加一项功能,允许用户通过从桌面拖动图像并将其放入浏览器来上传图像。我使用div创建了一个“drop zone”,给它一个宽度和高度,并添加了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中工作。我没有改变一行代码!它让我觉得这是一个与缓存有关的问题,所以我在每个浏览器上清除它,但仍然没有...

1 个答案:

答案 0 :(得分:1)

我刚刚尝试使用Chrome,Firefox和Opera(Mac OS),它正在全力以赴。

无论如何,输入文件HTML标签正在使用drag'n drop。因此,您不必创建div并使用JavaScript来处理所有事件,而是可以设置输入样式以直接从输入创建拖放框。然后拖放应该适用于所有浏览器。