Обнаружение, если пользователь бросает один и тот же файл дважды в окне браузера
Я хочу, чтобы пользователи могли перетаскивать изображения со своего рабочего стола в окно браузера, а затем загружать эти изображения на сервер. Я хочу загрузить каждый файл только один раз, даже если он будет добавлен в окно несколько раз. По соображениям безопасности информация из объекта File, доступная для JavaScript, ограничена. В соответствии сmsdn.microsoft.comтолько следующие свойства могут быть прочитаны:
namelastModifiedDate(Safari также выставляетsize а такжеtype).
Пользователь может поместить два изображения с одинаковым именем и датой последнего изменения из разных папок в окно браузера. Существует очень маленький, но конечный шанс, что эти два изображения на самом деле разные.
Я создал скрипт, который считывает необработанный dataURL каждого файла изображения и сравнивает его с файлами, которые ранее были сброшены в окне. Одним из преимуществ этого является то, что он может обнаруживать идентичные файлы с разными именами.
Это работает, но кажется излишним. Это также требует огромного количества данных для хранения. Я мог бы улучшить это (и добавить к перерасходу), создав хеш dataURL и сохранив его вместо этого.
Я надеюсь, что может быть более элегантный способ достижения моей цели. Что ты можешь предложить?
<!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>