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

Question

当有人将一个或多个文件从本地计算机拖到 div 时，我正在尝试获取文件名。

目的是通过拖拽上传图片，不使用html5 Drag and Drop API（支持老浏览器）。

当有人拖放一个（或多个文件）时，如何从 div 上的 jquery drop 事件中获取文件名？

Answer 1

我在 html5 中找到了很多关于如何执行此操作的内容，在浏览器调试器中搜索事件变量后，我能够准确找到我正在寻找的内容。

我只想说这比我想象的要简单得多，因为我花了至少一个小时在网上寻找解决方案。

您要做的是从 jquery 事件中获取“originalEvent”，该事件将具有 dataTransfer 属性。 dataTransfer 属性包含一个文件数组，您可以对其进行迭代（如果它们存在），并获取每个文件的名称属性（以及 lastModified、lastModifiedDate、大小和类型。

从 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);
}

要触发“drop”事件，我需要“取消”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);
    });
}