如何在html javascript jquery拖放事件上获取文件名(非html5) [英] how to get filename on html javascript jquery drag/drop event (non html5)

问题描述

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

I am trying to get the filename(s) when someone drags a file or files from their local computer to a div.

目的是通过拖放操作上传图像，而无需使用html5拖放API(以支持较早的浏览器).

The purpose is to upload images by dragging and dropping without the use of html5 Drag and Drop API (to support older browsers).

当有人拖放文件时，如何从div上的jquery删除事件获取文件名?

How can I get the filename(s) from a jquery drop event on a div when someone drags and drops a file (or files)?

推荐答案

我在html5中发现了很多有关如何执行此操作的方法，并且在浏览器调试器中搜索了事件变量后，我能够准确地找到我所要查找的内容.在寻找.

I've found plenty on how to do this in html5, and after searching through the event variable in the browser debugger, i was able to find exactly what i was looking for.

我只想说这比我认为要花至少一个小时在网上寻找解决方案要简单得多.

I just have to say this was far more simple than i thought it would have been considering i spent at least an hour looking for a solution on the net.

您要做的是从jquery事件中获取"originalEvent"，该事件将具有dataTransfer属性. dataTransfer属性包含一个文件数组，您可以对其进行迭代(如果存在)，并获取每个文件的name属性(以及lastModified，lastModifiedDate，大小和类型).

What you have to do is get the "originalEvent" from the jquery event, which will have a dataTransfer attribute. The dataTransfer attribute contains an array of files, which you can iterate though (if they exist), and get the name attribute of each file (along with lastModified, lastModifiedDate, size, and type.

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

the code needed to get the name of the first file from the drop was: e.originalEvent.dataTransfer.files[0].name

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

you can get the length of the file array by:

e.originalEvent.dataTransfer.files.length

仅举一个例子，要遍历拖放到潜水中的文件，您可以执行以下操作:

so just an example, to iterate through the files that were dragged and dropped onto the dive, you could do:

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

要触发放置"事件，我需要取消" div的拖动，拖动和拖动事件(拖动可能不必取消?)

To get the "drop" event to fire, i needed to "cancel out" the dragover, dragenter, and dragleave events of the div (dragover may not have to be canceled out?)

这是我的解决方案:

html代码:

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

javascript代码:

javascript code:

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

这篇关于如何在html javascript jquery拖放事件上获取文件名(非html5)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！