Question

我正在尝试创建一个下拉框，可以拖动图像文件进行上传。这在Chrome和Edge中运行良好。但是，我在Firefox和IE 11中遇到了麻烦。例如，在IE 11中，当我点击浏览按钮时，会弹出一个标题为“选择要上传的文件”的窗口。如果我单击一个图像并单击“打开”它工作正常，但我无法将任何文件拖出窗口。但是，如果我打开文件资源管理器，我可以从文件资源管理器窗口中拖放图像。类似的事情发生在Firefox中。我可以很好地从文件资源管理器拖动图像，但是当我尝试从标题为“文件上传”的弹出窗口拖动时，我得到一个带有圆圈和红色斜线的鬼图像。这里的一些线程建议使用dragstart函数，但这似乎不起作用，可能是因为文档说“请注意，从操作系统将文件拖入浏览器时不会触发dragstart和dragend事件。” https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

那么有没有办法在这些浏览器中从文件上传窗口拖动文件而不必打开文件浏览器？同样，我可以从Chrome和Edge的弹出窗口中拖放。

这是我的HTML：

    Files: <input type="file" id="fileInput" name="files" multiple><br />

    <div id="selectedFiles"></div>

    <div class="picList">
        <div id="dropbox" style="border:1px solid black;height:500px;">
             Drop Here
        </div>
    </div>

这是我的javascript：

dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
}
function drop(e) {
    e.stopPropagation();
    e.preventDefault();

    var dt = e.dataTransfer;
    var files = dt.files;

    handleFiles(files);
}

有什么建议吗？

编辑：

这是我的handleFiles函数（dupCheck是一个用于检查重复项的数组，存储的文件是要上传的文件数组，我需要这是因为我希望用户能够通过删除预览图像和HTML来删除文件FileReader是只读的，所以我无法直接从文件堆栈中删除单个图像。）：

    function handleFiles(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /^image\//;

        if (!imageType.test(file.type)) {
            continue;
        }
        var img = document.createElement("img");
        img.classList.add("obj");
        img.file = file;
        $(img).addClass('selFile');
        $(img).attr('data-file', file.name);
        var A = [];
        for (var z = 0; z < dupCheck.length; z++) {
            A.push(dupCheck[z].name)
        }
        if (!A.includes(file.name)) {
            storedFiles.push(file);
            var _checker = { name: file.name };
            dupCheck.push(_checker);
            dropbox.appendChild(img);
            var reader = new FileReader();
            reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img);
            reader.readAsDataURL(file);
            A = [];
        };
    }
}

Answer 1

您可以使用两个tooltip: { useHTML: true, formatter: function () { return '<img src="http://www.w3schools.com/tags/smiley.gif" width="42" height="42">'; } },元素替换拖放事件。删除(?<=")(?!0\d)[+-]?\d*\.?\d+(?=")元素的所选文件，<input type="file">控件<label>设置为<input type="file">。

opacity

Answer 2

所以我设法通过添加：

在Firefox中解决这个问题

e.dataTransfer.dropEffect = 'copy';

到我的dragover函数，现在看起来像这样：

    function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
}

当我拖动我的保管箱时，执行此操作会删除带有斜线的圆圈，这反过来又允许我进行上传。

然而，这在IE 11中不起作用，所以如果有人有任何想法，我会非常感激！

在IE11和Firefox

2 个答案: