2

在过去的几天里,我一直在阅读在我的网站上提交表单功能之前实现“图像预览”的不同方法。

我已经使用 HTML5 在某些浏览器上成功运行,但不是全部。这似乎很麻烦,所以我决定最好的方法是让用户选择的图像自动上传到服务器上的临时文件夹,以便之后可以显示给他们。

细节

这张图片是微博的一部分。

  • 用户点击微贴文本区域,它会展开,向他们显示一张相机图像,他们可以点击该图像来选择图像。

  • 选择成功后,我将使用 JQuery 的触发方法来触发提交一个将文件上传到临时文件夹的小表单。

  • 这将允许我在上传时显示进度条,然后将图像显示给用户。它适用于所有浏览器。

  • 然后,如果用户认为图像很好,他们将继续填写微博表单文本区域并单击发布。

  • 单击帖子时,临时图像将移动到其永久位置,并且路径将被更新。

我正在使用carrierwave进行图像上传。

在我的 microposts 表中,我有一个图像列,其中包含图像的路径。

这是我有点困惑的地方。当点击微博帖子按钮时,我将不得不了解如何获取图像的路径,以便它可以存储在微博表中,但路径将是不再使用的临时路径,因为图像本来是移动到它的永久路径。

我非常感谢有关直接执行此操作的重要信息。如果网络浏览器非常像汽车(例如,4 个轮子、方向盘、窗户、汽油、柴油),那么网络世界将会大不相同。

4

2 回答 2

3

你应该使用这个 jQuery 插件来上传图片:http: //blueimp.github.com/jQuery-File-Upload/

它支持您需要的内容,并默认为旧的和糟糕的浏览器提供有效的解决方案(例如 iframe)。

享受!

于 2012-05-05T14:06:28.830 回答
1

我认为,如果您需要在上传之前以表格形式预览图像,您(和我一样)会看到 JQuery Upload 插件太复杂而且不太容易正常运行(我能够看到预览,但后来我无法上传图片,因为它与您的表格混淆)。我花了太多时间而放弃了。

然后,更深入地寻找(谷歌搜索),我找到了这个解决方案:

http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/

编码非常简单快捷。

于 2013-04-22T23:05:56.663 回答