带有缩略图生成的 Facebook 风格图像上传答案

【问题标题】：Facebook style image upload with thumbnail generation带有缩略图生成的 Facebook 风格图像上传
【发布时间】：2012-06-23 02:32:59
【问题描述】：

好的，我知道这样的问题存在于 StackOverflow 和网络上的其他地方的多种形式中，但它们都没有指向我真正需要的东西（也许我错过了一个更适合我的问题的问题）。

我需要一个 Facebook 风格的图片上传机制，使用 Codeigniter 和 javascript/jquery。这是它应该做的 -

使用单个文件上传控件（或任何可点击的控件），打开“选择文件”对话框窗口，并允许用户从中选择多个图像。（我知道这还不能在 IE 中完成，而且我并不真正关心在 IE 中不能进行多文件选择）。
一旦用户选择了文件，页面应该会显示一系列进度条（就像 Facebook 一样）。随着每张图片上传，对应的进度条达到100%（如果实现起来更简单，我愿意放弃图形进度条，换成显示进度百分比的文字），图片的缩略图显示在旁边完成的进度条（或文本）。此时，用户应该可以选择通过单击取消按钮来删除上传的图像（我想我可以自己处理这部分）。
上传可以是顺序的（就像 Facebook 那样），也可以是异步的（我发现一些上传库就是这样工作的）。
最重要的（也是难倒我的部分）是缩略图生成。我知道有一些 HTML5/CSS3 技术允许您在文件实际上传之前显示缩略图，直接从用户的硬盘驱动器中提取它们。但这在 IE8 中不起作用，虽然我不担心多图像选择在 IE8 中不起作用，但我需要缩略图生成跨浏览器工作，包括 IE8（决定浏览器兼容性不是问题我可以指挥，所以请不要想出一个“螺丝IE！”的解决方案）。

我尝试过使用 uploadify（我对使用 Flash 没有任何限制），但似乎无法根据我的需要对其进行自定义。虽然 uploadify 确实显示了进度条，但我无法根据我上面描述的行为找到动态生成（和显示）缩略图的方法。我知道缩略图生成如何在 PHP 上工作，只是无法弄清楚如何与进度指示器一起实现它。我在寻找合适的 jQuery/ajax 调用吗？

任何帮助和/或指针将不胜感激。我承认我可能错过了一个可以解决我的问题的 StackOverflow 问题，所以请引导我访问该页面，或任何其他您认为对我有帮助的页面。请随意推荐上传库而不是 uploadify，您认为我可能会觉得有用。

提前致谢。感谢您阅读所有这些内容 - 我已尽力使问题具有正确的描述性！

【问题讨论】：

你遇到过 SWFUpload 插件吗？在此处查看文档code.google.com/p/swfupload

标签： php codeigniter jquery thumbnails image-upload

【解决方案1】：

我使用Jquery file upload 效果很好。它确实需要 IE 处于兼容模式，但适用于 chrome/firefox。

更新。它现在声称支持 IE 6.0+。

【讨论】：

【解决方案2】：

我将重点关注第 4 点。它可以完成，但你最终会使用 iframe（是的，我现在）。它们可以小 1 像素，但如果您想创建缩略图预览，则需要它们。一个很好的起点是：http://www.zurb.com/playground/ajax_upload

至于创建实际的预览图像（较小的版本），您可以使用 CI 的图像库。让我知道结果如何。

【讨论】：

我确实检查了 ajax_upload。但是，这不会显示进度条；它只显示一个微调按钮（我希望用户能够了解已完成多少上传，这就是我倾向于实现进度条的原因）。至于 CI 的图片库，是的，可以生成缩略图，但我的问题是 - 我如何知道上传何时完成，以便我可以从服务器获取文件？
另外，ajax_upload 似乎专注于一次上传单个文件。
当然，但既然你提到第 4 点是最重要的，任何帮助或指点都会受到重视，我想我会分享我所拥有的。