在Chrome、Firefox和Safari中,将拖放的文件转换为标准文件输入效果很好,但这些Microsoft浏览器也造成了问题。不知何故,在Microsoft Edge版本17、18和更低版本中,拖放的文件不会被传输,我正在寻找任何可能的方法来将拖放的文件移动到标准文件输入。如果你有任何想法,我将不胜感激。请找到我的代码如下:
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:
发布于 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。
https://stackoverflow.com/questions/62654617
复制相似问题