文件数据未在 js drop 事件中传递

Question

我在class中有几个方法。 Class 个实例正在动态创建。其中一个实例将事件侦听器添加到 'drop' 事件。该 drop 事件侦听器函数应该将图像数据传递给 class 实例中的 handleDrop()，但我在处理函数的 dt = e.dataTransfer, 行得到 cannot read property 'dataTransfer' of undefined。

我正在尝试关注 https://soshace.com/the-ultimate-guide-to-drag-and-drop-image-uploading-with-pure-javascript/

数据侦听器代码

    canvasWrapper.addEventListener('drop', canvasContext.preventDefault, false);
    canvasWrapper.addEventListener('drop', function () {
        canvasContext.handleDrop(this.event), false;

    });

处理函数

handleDrop(e) {
    let dt;
    console.log('we have a drop');
    dt = e.dataTransfer,
        console.log('dt', dt);
    files = dt.files;

完整代码在https://github.com/tnewhook/CartoonBuilder/blob/master/cartoonBuilder.js

Answer 1

答案很简单：我需要将 handleDrop() 中的两行组合成 files = e.dataTransfer.files,。出于某种原因，它喜欢单个 var 而不是两个。

文件数据未在 js drop 事件中传递

file data not getting passed on js drop event

javascript

drag-and-drop

event-handling