如何在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);
    });
}