15

假设：一个可以访问 file:// 的本地 HTML/Javascript 网页

在可拖动的 HTML 元素上开始拖动时，在事件处理函数dragStart(e)中，如何添加 File 对象以便将其识别为文件并最终出现在dataTransfer.files列表中？

前任：

function dragStart(e){
    var file = getSomeFileObjFromSomewhere();
    e.originalEvent.dataTransfer.effectAllowed = "all";
    e.originalEvent.dataTransfer.setData("file", file);

    console.log("\nFiles:");
    i = 0;
    var files = e.originalEvent.dataTransfer.files,
    len = files.length;
    for (; i < len; i++) {
        console.log("\nIndex: " + i + "\nFilename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
        console.dir(files[i]);
    }
}

具体来说，它需要在 Chrome/Chromium 上运行。而且，我们可以假设该文件存在于本地驱动器上。基本上，当文件从 Windows 资源管理器拖动到可放置元素上的 HTML 页面时，我希望相同的数据可用。

我知道这存在于 Chrome 中：

e.originalEvent.dataTransfer.setData("DownloadURL", fileType + ":" + name + ":" + filePath);

下载文件。但这不是我想要的，因为我想假设这是一个现有文件并且必须访问原始文件。

4

2 回答 2

4

您可以使用@kol 在模拟放置文件事件中发布的方法

也就是说，我们必须将一个参数传递给 ondrop，它

  • 有一个dataTransfer带有files数组子字段的字段，其中包含选定的File，和
  • 一个preventDefault方法（没有主体的函数可以）。

下面调整为在事件时附加.addEventListener("drop")到drop元素，将对象传递给绑定函数，该函数使用该函数返回上述适当的对象，并在第三个参数传递给，以便为访问或创建对象的每个事件最多调用一次事件。dragstartFileFunction.prototype.bind()once:true.addEventListener()dropdragstartFile

FileListobject 是只读的，anArray用于将对象存储File在事件处理程序dataTransfer.files的普通对象内的属性中。javascript

注意：这个接口应该被认为是“有风险的”，因为 Web 平台上的总趋势是用ECMAScript [ECMA-262]FileList中的平台对象替换这些接口。特别是，这意味着这种语法存在 风险；大多数其他程序化使用 不太可能受到最终迁移到某个 类型的影响。Arrayfilelist.item(0)FileListArray

如果event.dataTransfer.filesatdragstart事件包含File对象，则迭代并将每个对象FileList推送到数组。Filefiles

var drag = document.getElementById("drag")
var drop = document.getElementById("drop")

function handleDrop(evt) {
  evt.preventDefault();
  console.log(evt.dataTransfer.files);
}

function getSomeFileObjFromSomewhere() {
  var data = ["abc", "def"];
  var files = [];
  for (var i = 0; i < data.length; i++) {
    files.push(new File([data[i]], data[i] + ".text", {
      type: "text/plain",
      lastModified: new Date().getTime()
    }));
  }
  return files
}

function dataTransferFileObject(files) {
  return {
    preventDefault: function() {},
    dataTransfer: {
      files: Array.isArray(files) ? files : [files]
    }
  }
}

drag.addEventListener("dragstart", function dragStart(e) {

  var files = getSomeFileObjFromSomewhere();
  e.dataTransfer.effectAllowed = "all";

  console.log("\nFiles:");
  
  for (let i = 0; i < files.length; i++) {
    var {name, size, type} = files[i];
    console.log("\nFilename: " + name);
    console.log("Type: " + type);
    console.log("Size: " + size + " bytes");
  }
  // if `e.dataTransfer.files`, push `File` objects dragged
  // to `files` array
  if (e.dataTransfer.files) {
    for (let file of e.dataTransfer.files) {
      files.push(file);
    }
  }
  
  drop.addEventListener("drop"
  , handleDrop.bind(drop, dataTransferFileObject(files))
  , {once: true});

});

drop.addEventListener("dragover", function(evt) {
  evt.preventDefault()
});
div {
  width: 50px;
  height: 50px;
  padding: 10px;
  margin: 10px;
}

div:nth-child(1) {
  border: 2px dotted blue;
}

div:nth-child(2) {
  border: 2px dotted green;
}
<div draggable="true" id="drag">drag</div>
<div droppable="true" id="drop" webkitdropzone="webkitdropzone">drop</div>

plnkr http://plnkr.co/edit/ihQqs4t2zOg2XhIuNwal?p=preview

于 2017-03-02T17:39:35.427 回答
0

最简单的方法是通过“添加项目”：

const dataTransfer = new DataTransfer();
const aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
dataTransfer.items.add(new File([new Blob(aFileParts, { type: 'text/html' })], 'test.txt'));

只有你需要的是调整你的文件到文件类型:)

于 2021-11-25T10:43:20.300 回答