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

Question

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

其目的是通過拖放來上傳圖片而不使用html5拖放API（以支持舊版瀏覽器）。

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

Answer 1

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

我只是說，這比我想它會考慮我花了至少一個小時尋找網絡上的解決方案要簡單得多。

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

獲取從下拉的第一個文件的名稱是： 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); 
} 

獲得「降」事件，火災，我需要「抵消」了的dragover，的dragenter和dragleave的div事件（的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); 
    }); 
}