我的工作加入到我們的網站功能,允許用戶通過桌面上拖動它,並在瀏覽器中刪除它上傳圖片。我創建了一個使用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的說法,它應該適用於所有瀏覽器,但這不是我一直以來的體驗。
在此先感謝!
UPDATE:使這真是奇怪的事情是,我寫了這個代碼的那一天,我測試了它在我提到的所有5個瀏覽器,它在所有這些工作。第二天,它停止在IE,Edge和Opera上工作。我沒有更改一行代碼!這讓我覺得這是應該做與緩存的問題,所以我清除了它在每個瀏覽器,但仍沒有......
嗯,看到你的迴應後,我試着不使用Visual Studio調試器中的瀏覽器中運行(因爲我已經在我之前的測試中一直在做),和它的工作!它必須是Visual studio調試器或它使用的IIS Express服務器的問題。謝謝! – starx207