在IE11和Firefox中拖放文件

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

那么有没有一种方法可以在这些浏览器中从文件上传窗口拖动文件，而不必打开文件资源管理器？再次，我可以从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 = []; 
     }; 
    } 
}

来源

2016-11-11 Pennywise

考虑使用库。这是我写的一个。 https://github.com/Pamblam/fileUpload –

很酷。我会看一看。 – Pennywise

你可以在问题中包含'handleFiles'的文本吗？ – guest271314

您也可以替换使用拖放事件的两个<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>

来源

2016-11-11 23:31:35 guest271314

就在。这给了我一些经过。谢谢！ – Pennywise

当我在Chrome中运行上面的代码段时，它可以工作，但不能在Firefox中运行。我仍然在Firefox中使用斜杠。当我在IE 11中运行它时，我可以将图像拖出窗口，但它们不像在Chrome中那样追加图像。它通过点击来工作，但不拖动。尽管如此，我非常重视这种方法！我一定做错了什么。 – Pennywise

@Pennywise在点击'>'之后，还没有考虑从资源管理器中拖拽文件直到读取您的问题。不确定是否希望将“选择文件”或“浏览”对话框用于拖放操作。您可以在铬和Firefox上将文件拖放到'“元素本身。 – guest271314

所以我设法通过增加来解决这个在Firefox：

e.dataTransfer.dropEffect = 'copy';

我的dragover功能，现在看起来是这样的：

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

做当我拖过我的保管箱时，这将删除带斜杠的圆反过来，我也可以下载上传。

但是，这不适用于IE 11，所以如果任何人有任何想法，我将不胜感激！

来源

2016-11-16 20:26:06 Pennywise

在IE11和Firefox中拖放文件

回答

相关问题