我想允许用户将图像从他们的桌面拖动到浏览器窗口，然后将这些图像上传到服务器。我只想上传每个文件一次，即使它被多次放在窗口上也是如此。出于安全原因，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/
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案
这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？
我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("
我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植