Question

我在整个页面上进行了拖放。现在，如果我放下一个文件（.txt），我想获取文件名，并且应该将文件路径和文件名放在“输入” -Box（id：fileUpload）中，但是不幸的是，我不知道如何解决这个问题。 DragNDrop起作用！

//JavaScript

var dropZone = document.getElementById('dropzone');

    function showDropZone() {
        dropZone.style.display = "block";
    }
    function hideDropZone() {
        dropZone.style.display = "none";
    }

    function allowDrag(e) {
        if (true) {  // Test that the item being dragged is a valid one
            e.dataTransfer.dropEffect = 'copy';
            e.preventDefault();
        }
    }

    function handleDrop(e) {
        e.preventDefault();
        hideDropZone(this);
        alert('File was dropped');
    }

    // 1
    window.addEventListener('dragenter', function (e) {
        showDropZone();
    });

    // 2
    dropZone.addEventListener('dragenter', allowDrag);
    dropZone.addEventListener('dragover', allowDrag);

    // 3
    dropZone.addEventListener('dragleave', function (e) {
        hideDropZone();
    });

    // 4
    dropZone.addEventListener('drop', handleDrop);

//HTML (here i can use the "div" or the "form" as the dropzone)
<div id="dropzone" class="dropzone"></div>
@*<form action="/file-upload" id="dropzone" class="dropzone"></form>*@

<input type="file" id="fileUpload" name=""/>

Answer 1

该事件包含dataTransfer属性。此数据传输属性包含一个文件属性。参见：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/files

在此页面上，您可以找到以下jsbin的链接： https://jsbin.com/hiqasek/edit?html,js,output

function dodrop(event)
{
  var dt = event.dataTransfer;
  var files = dt.files;

  var count = files.length;
  output("File Count: " + count + "\n");

    for (var i = 0; i < files.length; i++) {
      output(" File " + i + ":\n(" + (typeof files[i]) + ") : <" + files[i] + " > " +
             files[i].name + " " + files[i].size + "\n");
    }
}

function output(text)
{
  document.getElementById("output").textContent += text;
  //dump(text);
}

file属性是包含有关文件信息的文件对象数组。文件名可以通过文件[i] .name进行访问，如在插件中所示。

此后，您需要通过从页面中检索元素并更改内部文本来更新DOM。在输出功能中可以看到这一点。

似乎您无法再通过file.path属性检索文件的路径： how to get fullpath of dropped folder from file system 由于安全原因，这是可以想象的。

我尝试使用

 var entry = event.dataTransfer.items[0].webkitGetAsEntry();

并使用

entry.fullPath

按照以下说明获取路径：How to drag and drop directory and get only the path of it?

但是，似乎不再支持此功能，因为它仅将路径显示为“ /”。

Answer 2

function handleDrop(e) {
        e.preventDefault();
        hideDropZone(this);
        alert('File was dropped');
    }

请使用e.point代替。

DragNDrop：获取放置在元素（div或表单）上的文件的文件名

2 个答案: