如何在html javascript jquery拖放事件（非html5）上獲取文件名

Question

當有人將文件或文件從本地計算機拖到div時，我試圖獲取文件名。

目的是通過拖放上傳圖像，而無需使用html5拖放API（以支持舊版瀏覽器）。

當有人拖放文件（或文件）時，如何從div上的jquery drop事件中獲取文件名？

Answer 1

我已經找到了很多關於如何在html5中執行此操作，並在瀏覽器調試器中搜索事件變量后，我能夠找到我正在尋找的確切內容。

我只是要說這比我想象的要簡單得多，因為我花了至少一個小時在網上尋找解決方案。

你要做的是從jquery事件中獲取“originalEvent”，它將具有dataTransfer屬性。 dataTransfer屬性包含一個文件數組，您可以迭代它們（如果存在），並獲取每個文件的name屬性（以及lastModified，lastModifiedDate，size和type）。

從drop中獲取第一個文件名稱所需的代碼是：e.originalEvent.dataTransfer.files [0] .name

你可以通過以下方式獲得文件數組的長度：

e.originalEvent.dataTransfer.files.length

所以只是一個例子，要遍歷拖放到潛水的文件，你可以這樣做：

for (var i = 0; i < e.originalEvent.dataTransfer.files.length; i++) {
    alert(e.originalEvent.dataTransfer.files[i].name);
}

為了讓“墮落”事件發生，我需要“取消”div的dragover，dragenter和dragleave事件（dragover可能不需要取消？）

繼承我的解決方案：

HTML代碼：

<div id="dropimagebox" class="noselect">Drop image here or click</div>

javascript代碼：

function initDragAndDropDialog()
{           
    document.getElementById("imagedialog").showModal();

    $("#dialoginnerds").bind('clickoutside',function(){
            document.getElementById("imagedialog").close();
    });
    $("#dialoginnerds").on("dragover", function(e) {
        e.preventDefault();  
        e.stopPropagation();
        $("#dropimagebox").addClass('dragging');
    });
    $('#dialoginnerds').on('dragenter',function(e){
        e.preventDefault();
        e.stopPropagation();
        $("#dropimagebox").addClass('dragging');
    })
    $('#dialoginnerds').on('dragleave',function(e){
        e.preventDefault();
        e.stopPropagation();
        $("#dropimagebox").removeClass('dragging');
    })

    $("#dialoginnerds").on('drop', function (e) {
        e.preventDefault();
        alert(e.originalEvent.dataTransfer.files[0].name);
    });
}