繁体   English   中英

如何使用Rails和jQuery实现图像预览?

[英]How do I implement image preview using Rails and jQuery?

最近几天,我在网站上提交表单提交功能之前,阅读了各种实现“图像预览”的方法。

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

细节

此图像是微帖的一部分。

  • 用户单击微信文本区域,它将展开并显示给他们一个摄像机图像,他们可以单击以选择图像。

  • 成功选择之后,我将使用JQuery的trigger方法触发提交将文件上传到temp文件夹的小型表单的提交。

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

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

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

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

在我的微博表格中,我有一个image列,其中包含图像的路径。

这是我有点困惑的地方。 我将需要一些如何在单击微博帖子按钮时获取图像的路径的信息,以便可以将其存储在微博表中,但是该路径将是不再使用的临时路径,因为该图像将搬到了它的永久道路。

对于执行此操作的直接方法,我真的非常感谢。 如果网络浏览器非常像汽车(例如4轮,方向盘,窗户,汽油,柴油),那么网络世界将大为不同。

您应该使用此jQuery插件上传图片: http : //blueimp.github.com/jQuery-File-Upload/

它支持您所需要的内容,并且默认使用旧的和笨拙的浏览器的有效解决方案(例如iframe)。

请享用!

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

然后,更深入地(查找),我找到了以下解决方案:

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

编写起来非常简单快捷。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM