Datei Drag & Drop in IE11 und Firefox

Ich versuche, eine Drop-Box, wo Bilddateien zum Hochladen gezogen werden können, zu erstellen. Dies funktioniert in Chrome und Edge einwandfrei. Allerdings habe ich Probleme in Firefox und IE 11. Zum Beispiel, in IE 11, wenn ich auf die Schaltfläche zum Durchsuchen klicken, erscheint ein Fenster mit dem Titel "Wählen Sie die Datei zum Hochladen." Wenn ich auf ein Bild klicke und auf "Öffnen" klicke, funktioniert es einwandfrei, aber ich kann keine Dateien aus dem Fenster ziehen. Wenn ich jedoch meinen Datei-Explorer öffne, kann ich Bilder einfach per Drag-and-Drop aus dem Datei-Explorer-Fenster ziehen. Ähnliches passiert in Firefox. Ich kann Bilder aus dem Datei-Explorer einfach ziehen, aber wenn ich versuche, aus dem Popup-Fenster "Datei-Upload" zu ziehen, bekomme ich ein Geisterbild mit einem Kreis und einem roten Schrägstrich. Einige Threads hier haben vorgeschlagen, eine Dragstart-Funktion zu verwenden, aber das scheint nicht zu funktionieren, wahrscheinlich weil in der Dokumentation steht "Beachten Sie, dass Dragstart- und Dragendereignisse nicht ausgelöst werden, wenn Sie eine Datei vom Betriebssystem in den Browser ziehen." https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API Datei Drag & Drop in IE11 und Firefox

Also gibt es eine Möglichkeit, Dateien aus dem Datei-Upload-Fenster in diesen Browsern ziehen zu können, anstatt Datei-Explorer öffnen zu müssen? Auch hier kann ich per Drag & Drop aus dem Popup in Chrome und Edge ziehen.

Hier ist mein 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>

Hier ist mein 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); 
}

Jede Beratung?

Edit:

Hier ist meine handleFiles Funktion (dupCheck ein Array ist für Duplikate und gespeicherte Dateien zu überprüfen, ist ein Array von Dateien hochgeladen werden, was ich brauche, weil ich Benutzer möchte eine Datei löschen können, durch das Vorschaubild zu löschen und nur HTML Filereader lesen, damit ich nicht einzelne Bilder direkt aus dem Dateistapel löschen kann.):

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 = []; 
     }; 
    } 
}

Quelle

2016-11-11 Pennywise

erwägen, eine Bibliothek zu verwenden. Hier ist eine, die ich geschrieben habe. https://github.com/Pamblam/fileUpload –

Cool. Ich werde es mir ansehen. – Pennywise

Können Sie Text von 'handleFiles' in Frage einfügen? – guest271314

Sie können mit zwei <input type="file"> Elementen für Drag & Drop-Ereignisse ersetzen. Löschen Sie ausgewählte Dateien unter <label> Element mit <input type="file"> Steuerelement mit opacity auf 0 festgelegt.

<!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>

Quelle

2016-11-11 23:31:35 guest271314

direkt zu verwenden. Das gibt mir etwas zu gehen. Vielen Dank! – Pennywise

Wenn ich das obige Code-Snippet in Chrome ausführen, funktioniert es, aber nicht in Firefox. Ich bekomme immer noch den Kreis mit dem Schrägstrich in Firefox. Wenn ich es in IE 11 ausführe, kann ich Bilder aus dem Fenster ziehen, aber sie hängen nicht wie in Chrome an. Es funktioniert, indem Sie klicken, aber nicht ziehen. Trotzdem schätze ich den Ansatz sehr! Ich muss etwas falsch machen. – Pennywise

@Pennywise Hatte es noch nicht in Betracht gezogen, Dateien aus dem Explorer nach dem Klicken auf '' zu ziehen, bis Sie Ihre Frage gelesen haben. Es ist nicht sicher, ob das Dialogfeld "Datei auswählen" oder "Durchsuchen" zum Ziehen und Ablegen verwendet werden soll. Sie können Dateien in '' element sowohl in Chrom als auch in Firefox ziehen und ablegen. – guest271314

So konnte ich dies in Firefox lösen durch Zugabe:

e.dataTransfer.dropEffect = 'copy';

meiner dragover-Funktion, die nun wie folgt aussieht:

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

Doing Dies entfernt den Kreis mit einem Schrägstrich, wenn ich über meine Dropbox ziehe, wh Ich wiederum kann den Drop zum Upload machen.

Allerdings funktioniert dies nicht in IE 11, also wenn jemand irgendwelche Ideen hat, würde ich es sehr zu schätzen wissen!

Quelle

2016-11-16 20:26:06 Pennywise

Datei Drag & Drop in IE11 und Firefox

Antwort

Verwandte Themen