我想允许用户将图像从他们的桌面拖动到浏览器窗口，然后将这些图像上传到服务器。我只想上传每个文件一次，即使它被多次放在窗口上也是如此。出于安全原因，JavaScript 可访问的 File 对象中的信息是有限的。根据msdn.microsoft.com ，只能读取以下属性:
姓名lastModifiedDate
(Safari 还公开了size 和type)。
用户可以将不同文件夹中具有相同名称和最后修改日期的两个图像拖放到浏览器窗口中。这两张图片实际上不同的可能性非常小但有限。
我创建了一个脚本，它读取每个图像文件的原始数据 URL，并将其与之前放在窗口中的文件进行比较。这样做的一个优点是它可以检测具有不同名称的相同文件。
这行得通，但似乎有点矫枉过正。它还需要存储大量数据。我可以通过对 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>
最佳答案
这是一个建议(我没有在你的问题中看到被提及):
创建一个 Blob URL对于每个 file -FileList 中的对象- 要存储在浏览器中的对象 URL Store ，保存他们的 URL 字符串。
然后将该 URL 字符串传递给 webworker (单独的线程)使用 FileReader读取分块中的每个文件(通过 Blob URL 字符串访问)，重新使用一个固定大小的缓冲区(几乎像一个循环缓冲区)，计算文件的哈希(有简单/快速的可携带哈希，如 crc32，通常可以在同一循环中简单地与垂直和水平校验和组合(也可以在 block 上携带))。
您可以通过使用适当的“缓冲区 View ”(快 4 倍)读取 32 位(无符号)值而不是 8 位值来加快该过程。系统字节顺序并不重要，不要在这上面浪费资源!
完成后，webworker 将文件的哈希返回给主线程/应用程序，然后主线程/应用程序简单地执行矩阵比较 [[fname, fsize, blobUrl, fhash] /* , etc /*] .
专业版
重新使用的固定缓冲区显着降低了内存使用量(到您指定的任何级别)，网络 worker 通过使用额外的线程(不会阻塞主浏览器的线程)来提高性能。
反对
对于禁用了 javascript 的浏览器，您仍然需要服务器端回退(您可以向表单添加一个隐藏字段并使用 javascript 设置它的值作为启用 javascript 的检查的手段，以降低服务器端负载)。然而......即使那样......你仍然需要服务器端回退以防止恶意输入。
有用性
所以.. 没有净 yield ？好吧.. 如果用户上传重复文件(或只是在基于网络的应用程序中使用它们)的可能性比您为了执行检查而节省的腰带宽要合理。在我看来，这是相当大的(生态/经济)胜利。
额外
哈希很容易发生冲突，期间。为了降低(现实的)碰撞机会，您可以选择更高级的哈希算法(大多数都可以在分块模式下轻松携带)。更高级的哈希的明显权衡是更大的代码大小和更低的速度(更高的 CPU 使用率)。
关于javascript - 检测用户是否在浏览器窗口中两次放置同一个文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30006231/