拖放圖片上傳不工作的特定瀏覽器

我的工作加入到我們的網站功能，允許用戶通過桌面上拖動它，並在瀏覽器中刪除它上傳圖片。我創建了一個使用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上工作。我沒有更改一行代碼！這讓我覺得這是應該做與緩存的問題，所以我清除了它在每個瀏覽器，但仍沒有......

來源

2017-03-03 starx207

我只是試圖在Chrome，Firefox和Opera（Mac OS）並一切正常上3.

不管怎麼說，輸入文件HTML標記正在與drag'n下降。因此，不需要創建div並使用JavaScript來處理所有事件，只需對輸入進行樣式設置即可直接從輸入中創建拖放框。然後drag'n drop應該適用於所有瀏覽器。

來源

2017-03-03 19:08:58 Zetura

嗯，看到你的迴應後，我試着不使用Visual Studio調試器中的瀏覽器中運行（因爲我已經在我之前的測試中一直在做），和它的工作！它必須是Visual studio調試器或它使用的IIS Express服務器的問題。謝謝！ – starx207

拖放圖片上傳不工作的特定瀏覽器

回答

相關問題