Facebook样式图像上传与缩略图生成

时间:2012-06-20 21:15:27

标签: php codeigniter jquery thumbnails image-upload

好的,我知道StackOverflow和网络上其他地方存在多种形式的问题,但没有一个能指出我实际需要的东西(也许我错过了一个更能满足我的问题的问题)。

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

  1. 使用单个文件上传控件(或任何可点击的控件),打开“选择文件”对话框窗口,并允许用户从中选择多个图像。 (我知道这还不能在IE中完成,我真的不关心多个文件选择在IE中不起作用。)

  2. 用户选择文件后,页面应显示一系列进度条(如Facebook所做的那样)。当每个图像上传时,相应的进度条达到100%(如果它更容易实现,我愿意放弃显示进度百分比的文本的图形进度条),并且图像的缩略图显示在旁边完成进度条(或文本)。此时,用户应该可以通过单击取消按钮来删除上传的图像(我想我可以单独使用此部件)。

  3. 上传可以是顺序的(就像Facebook一样),也可以是异步的(我发现这样的上传库工作)。

  4. 最重要的是(以及让我困扰的部分)是缩略图生成。我知道有一些HTML5 / CSS3技术允许您在文件实际上传之前显示缩略图,直接从用户的硬盘驱动器中提取它们。但是这在IE8中不起作用,虽然我并不关心多个图像选择在IE8中不起作用,但我需要缩略图生成才能跨浏览器工作,包括IE8(决定浏览器兼容性不是什么东西)我可以命令,所以请不要提出“螺丝IE!”解决方案。)

  5. 我尝试过使用uploadify(我没有使用Flash的限制),但似乎无法根据我的需要自定义它。虽然uploadify确实显示了进度条,但根据我上面描述的行为,我无法在运行中找到生成(和显示)缩略图的方法。我知道缩略图生成如何在PHP上工作,只是无法弄清楚如何与进度指标一起实现它。我在寻找合适的jQuery / ajax电话吗?

    任何帮助和/或指示将不胜感激。我承认我可能错过了可以解决我的问题的StackOverflow问题,因此请将我引导至该页面,或者您认为可以帮助我的任何其他页面。请随时建议上传除uploadify之外的库,您认为我认为这些库可能很有用。

    提前致谢。并感谢阅读所有这些 - 我尽力使问题正确描述!

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

我将在这里专注于第4点。它可以完成,但你最终会使用iframe(是的,我现在)。 它们可以是1px小,但如果你想创建缩略图预览,你将需要它们。 一个很好的起点是:http://www.zurb.com/playground/ajax_upload

至于创建实际预览图像(较小版本),您可以使用CI的图像库。 让我知道它是如何运作的。