0

由于 Fine Uploader 4.0 能够完全在客户端创建图像预览（IE 9.0 和更低版本除外），因此是否可以使用相同的技术创建也与原始文件一起上传的缩略图，特别是到 Amazon S3。如您所知，Amazon S3 不提供服务器端处理，因此很难创建直接上传到 Amazon S3 的媒体缩略图，无需提前创建缩略图，或使用单独的服务器仅处理图像以创建缩略图.

如果可以创建正在上传的图片的缩略图，并且只在客户端这样做，那么如何将缩略图包含在上传的文件列表中？

按照这些思路，我们还想创建一个简单的 HTML 页面，其中包含页面中上传的文件，然后与其余文件同时上传。该 HTML 页面将作为交付页面提供给用户，然后可以传递给最终目的地收件人。我们当然可以让服务器端部分在数据库中记录要上传的文件，并允许服务器呈现交付页面。但我首先想尝试仅在客户端创建自定义 HTML 交付页面，然后改用它。原因是首先，我们希望避免对我们的正常服务器造成过度压力，其次，如果用户上传的文件导致内容被标记，我不希望我们的域名被列入黑名单，因为它看起来好像我们在提供恶意内容（但我们完全打算监控使用此服务上传的任何文件）。相反，如果所有文件都通过 S3 传递，尽管它们都来自我们控制的存储桶，但我假设在 S3 将特定存储桶列入黑名单的可能性要小得多。如果您对这个想法/关注/理论有什么要补充的，我很想听听。

谢谢。

4

1 回答 1

0

如果可以创建正在上传的图片的缩略图，并且只在客户端这样做，那么如何将缩略图包含在上传的文件列表中？

请注意，此技术仅适用于现代浏览器：

您可以将呈现预览的标签属性中的data-uripresent转换为 a ，然后使用FU 的 API 方法将其添加到正在上传的文件列表中。src<img>BlobaddBlobs()

SO#4997908似乎有可以将数据 uri 转换为 blob 的代码。（我已经测试了 Maurizo 对该答案的解决方案，它似乎可以正常工作，尽管我只对其进行了最低限度的测试）

这种技术的一个警告是，如果您使用的是 FU UI 模式，那么新添加的缩略图将在addBlobs被调用时呈现到文件列表中，将为此生成另一个预览，并且......好吧，这可以无限继续下去。

这是因为——如果我们查看 UI 模式的onSubmit处理程序——它每次都将文件添加到文件列表中。

_onSubmit: function(id, name) {
    this._parent.prototype._onSubmit.apply(this, arguments);
    this._addToList(id, name);
}

要在 UI 模式下绕过这个警告，您可以在核心模式下创建 Fine Uploader 的另一个实例，调用addBlobs该实例，并最终也调用uploadStoredFiles该实例。这将使您能够上传您的图像，它是预览，并且文件列表中没有额外的文件。

于 2013-11-13T16:01:13.110 回答