首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >无法将拖放的文件传输到Microsoft edge版本18或更低版本的标准文件输入

无法将拖放的文件传输到Microsoft edge版本18或更低版本的标准文件输入
EN

Stack Overflow用户
提问于 2020-06-30 17:45:06
回答 1查看 88关注 0票数 0

在Chrome、Firefox和Safari中,将拖放的文件转换为标准文件输入效果很好,但这些Microsoft浏览器也造成了问题。不知何故,在Microsoft Edge版本17、18和更低版本中,拖放的文件不会被传输,我正在寻找任何可能的方法来将拖放的文件移动到标准文件输入。如果你有任何想法,我将不胜感激。请找到我的代码如下:

代码语言:javascript
运行
复制
function uploadWithDragAndDrop() {
    var dragCounter = 0;

    // Drag enter
    jQuery('#pageWrapper .contentArea').on('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();

        // Disabling drag and drop option when Web (Labeled) tab is active
        if (isWebLabeledTabActive()) {
            return;
        }

        dragCounter++;
        scrollToFileDropArea();
        addStyleAttribute();
    });

    // Drag over
    jQuery('#pageWrapper .contentArea').on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();

        if (isWebLabeledTabActive()) {
            return;
        }

        scrollToFileDropArea();
        addStyleAttribute();
    });

    // Drag leave
    jQuery('#pageWrapper .contentArea').on('dragleave', function (e) {
        e.stopPropagation();
        e.preventDefault();

        dragCounter--;

        if (dragCounter === 0) {
            removeStyleAttribute();
        }
    });

    // Mouse leave
    jQuery('#pageWrapper .contentArea').mouseleave(function () {
        removeStyleAttribute();
    });

    // Drop
    jQuery('#pageWrapper .contentArea').on('drop', function (eventObject) {
        eventObject.stopPropagation();
        eventObject.preventDefault();

        if (isWebLabeledTabActive()) {
            return;
        }

        removeStyleAttribute();
        transferFile(eventObject);
    });
}

function transferFile(eventObject) {
    var files = eventObject.originalEvent.dataTransfer.files;
    var i, fileName;

    for (i = 0; i < files.length; i++) {
        fileName = files[i].name;
    }
    
    var fileInput = ".file-upload-area input[type='file']:first";

    if (isBrowserSafari()) {
        jQuery(fileInput).prop("files", files);
    } else {
        jQuery(fileInput).prop("files", files).trigger('change');
    }
}

当我在新版Edge (版本83.0.478.56 -2020年5月)和17年(42.17134 -2018年3月)中调试代码时。我看到对象(被删除的文件),它的proto是null:

EN

回答 1

Stack Overflow用户

发布于 2020-07-02 13:35:51

我已经检查了我这边的例子。首先,由于Microsoft Edge 83是基于铬的,因此该示例运行良好。但是如果我使用Edge18版本,它将显示"Assignment to read-only properties is not allowed in strict mode“错误。似乎我们不能将文件拖到文件类型的输入元素中(因为它是只读的)。将文件类型input元素更改为div标记后,代码在遗留版本的Microsoft Edge中运行良好。其次,从the screenshot中,我们可以看到即使内部的_proto_属性也是空的,但是我们可以看到外部的_proto_属性不是空的,所以我们可以获得drop files和preview the image

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62654617

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档