个人中心
gpt4 book ai didi

javascript - IE11 和 Firefox 中的文件拖放

转载 作者：行者123 更新时间：2023-11-28 01:04:24 27 4
gpt4 key购买 nike

我正在尝试创建一个下拉框，可以在其中拖动图像文件进行上传。这在 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 是一个数组，用于检查重复项，stored files 是一个要上传的文件数组，我需要它，因为我希望用户能够通过删除预览图像和 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 = [];
        };
    }
}

最佳答案

您可以用两个 <input type="file"> 代替拖放事件的元素。将所选文件拖放到 <label>具有 <input type="file"> 的元素控制有 opacity设置为 0 .

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    #drop {
      opacity: 0;
    }
    #drop,
    label[for="drop"] {
      height: 500px;
      width: 500px;
    }
    label[for="drop"] {
      display: block;
      border: 1px solid black;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js">
  </script>
  <script>
    $().ready(function() {
      var selectedFiles = $("#selectedFiles");
      
      function handleFiles(e) {
        var files = e.target.files;
        var input = this;

        for (var i = 0; i < files.length; i++) {
          (function(i, input) {
            var file = files[i];
            var figure = $("<figure></figure>", {
              append: $("<figcaption></figcaption>", {
                html: file.name
              })
            });

            var img = $("<img>").on("load", function() {
              selectedFiles.append(figure.prepend(img));
              input.value = null;
            });

            var reader = new FileReader();
            reader.onload = function(e) {
              img.attr("src", e.target.result);
            };
            reader.readAsDataURL(file);
          })(i, input);

        }
      }
      $(".fileInput").change(handleFiles);

    })
  </script>
</head>

<body>
  Files:
  <input type="file" 
         accept="image/*" 
         class="fileInput" 
         name="files0" 
         multiple="multiple" />
  <br />

  <div class="picList">

    <label for="drop" id="dropbox">
      Drop Here
      <input type="file" 
             accept="image/*" 
             id="drop" 
             class="fileInput" 
             name="files1" 
             multiple="multiple" />
    </label>
  </div>
  <div id="selectedFiles"></div>
</body>

  
</html>

关于javascript - IE11 和 Firefox 中的文件拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40556674/

27 4 0
文章推荐： html - 如何考虑使用@media 的大多数手机屏幕？
文章推荐： c++ - 为什么 Windows 的 gflags 不会因这段代码而崩溃？
文章推荐： C++/W32 Sharing Class - 代码设计题
文章推荐： c++ - glUnproject 和重新绘制场景后的奇怪结果
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com