javascript - 如何在 html javascript jquery 拖放事件(非 html5)上获取文件名

Question

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

目的是在不使用html5 Drag and Drop API的情况下通过拖放上传图片(以支持旧浏览器)。

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

Answer 1

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

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

您需要做的是从 jquery 事件中获取“originalEvent”，该事件将具有 dataTransfer 属性。 dataTransfer 属性包含一个文件数组，您可以遍历这些文件(如果它们存在)，并获取每个文件的名称属性(以及 lastModified、lastModifiedDate、大小和类型。

从 drop 中获取第一个文件的名称所需的代码是: e.originalEvent.dataTransfer.files[0].name

您可以通过以下方式获取文件数组的长度:

e.originalEvent.dataTransfer.files.length

举个例子，要遍历拖放到 dive 上的文件，您可以这样做:

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