Erkennen, ob der Benutzer dieselbe Datei zweimal in einem Browserfenster ablegt

Question

May 02, 2015, 08:56 PM

Erkennen, ob der Benutzer dieselbe Datei zweimal in einem Browserfenster ablegt

Ich möchte Benutzern erlauben, Bilder von ihrem Desktop in ein Browserfenster zu ziehen und diese Bilder dann auf einen Server hochzuladen. Ich möchte jede Datei nur einmal hochladen, auch wenn sie mehrmals im Fenster abgelegt wird. Aus Sicherheitsgründen sind die Informationen aus dem File-Objekt, auf die JavaScript zugreifen kann, begrenzt. Gemäß msdn.microsoft.com, nur die folgenden Eigenschaften können gelesen werden:

namelastModifiedDate

(Safari macht auch @ verfügbsize undtype).

Der Benutzer kann zwei Bilder mit demselben Namen und Datum der letzten Änderung aus verschiedenen Ordnern in das Browserfenster ziehen. Es besteht eine sehr geringe, aber begrenzte Wahrscheinlichkeit, dass diese beiden Bilder tatsächlich unterschiedlich sind.

Ich habe ein Skript erstellt, das die Rohdaten-URL jeder Bilddatei einliest und sie mit Dateien vergleicht, die zuvor im Fenster abgelegt wurden. Dies hat den Vorteil, dass identische Dateien mit unterschiedlichen Namen erkannt werden können.

Dies funktioniert, aber es scheint übertrieben. Es erfordert auch eine große Datenmenge, um gespeichert zu werden. Ich könnte dies verbessern (und zum Overkill hinzufügen), indem ich einen Hash der dataURL mache und diesen stattdessen speichere.

Ich hoffe, dass es einen eleganteren Weg gibt, um mein Ziel zu erreichen. Was können Sie vorschlagen?

<!DOCTYPE html>
<html>
<head>
  <title>Detect duplicate drops</title>
  <style>
html, body {
width: 100%;
height: 100%;
margin: 0;
background: #000;
}
  </style>
  <script>
var body
var imageData = []


document.addEventListener('DOMContentLoaded', function ready() {
  body = document.getElementsByTagName("body")[0]
  body.addEventListener("dragover", swallowEvent, false)
  body.addEventListener("drop", treatDrop, false)
}, false)


function swallowEvent(event) {
  // Prevent browser from loading the dropped image in an empty page
  event.preventDefault()
  event.stopPropagation()
}


function treatDrop(event) {
  swallowEvent(event)

  for (var ii=0, file; file = event.dataTransfer.files[ii]; ii++) {
    importImage(file)
  }
}


function importImage(file) {
    var reader = new FileReader()

    reader.onload = function fileImported(event) {
        var dataURL = event.target.result
        var index = imageData.indexOf(dataURL)
        var img, message

        if (index < 0) {
            index = imageData.length
            console.log(dataURL)
            imageData.push(dataURL, file.name)  
          message = "Image "+file.name+" imported"
        } else {
          message = "Image "+file.name+" imported as "+imageData[index+1]
        }

        img = document.createElement("img")
        img.src = imageData[index] // copy or reference?
        body.appendChild(img)

        console.log(message)
    }

  reader.readAsDataURL(file)
}
  </script>
</head>
<body>
</body>
</html>