Question

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

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

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

感谢。

Answer 1

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

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

您可以将呈现预览的src标记的<img>属性中的data-uri转换为Blob，然后使用FU's API method addBlobs()将其添加到正在上载的文件列表中。

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

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

这是因为 - 如果我们查看UI模式的onSubmit handler - 它每次都会将文件添加到文件列表中。

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

要在UI模式中解决此问题，您可以在核心模式下创建另一个Fine Uploader实例，在该实例上调用addBlobs，并最终在该实例上调用uploadStoredFiles。这样您就可以上传图像，进行预览，而无需在文件列表中添加额外的文件。

上传到Amazon S3的Fine Uploader图像预览？

1 个答案: