【问题标题】:Image upload in form using input type text使用输入类型文本以表单形式上传图像
【发布时间】:2013-02-13 07:16:25
【问题描述】:

我对网页设计有点陌生。 我正在制作一个关于 ruby​​ on rails 的项目。我想要一个特定列表的表单,我可以在其中上传该列表的图像。图像在另一个表中。现在一种方法是我可以使用文件上传但是当我编辑任何列表时,它将显示文件字段为空。所以,我正在考虑使用输入类型文本并关联浏览按钮和 javascript 来上传图像。此外,我还想要 javacsript 函数来添加新图像、编辑图像(特定)或删除图像(特别)。所以,正如你所看到的那样,它会给大脑带来痛苦。请解释一下如何轻松并逐步进行操作。谢谢

【问题讨论】:

    标签: javascript html ruby-on-rails image


    【解决方案1】:

    【讨论】:

    • 我正在用 html 制作整个表单(它对我来说比 ruby​​ 更容易)。请据此说明。我想要的只是用户使用浏览输入 url 的简单文本。然后上传图片。(还有添加新功能、删除、编辑等的附加功能)。在我这边,我希望将该图片保存在资产/图片中/example.jpg 并在图像表中保存了这样形成的地址....我没有得到任何地方。我认为它很简单,但我不理解。请帮助。它很重要
    • 对不起,我从来没有想过这个问题,如何只为 HTML 做。我不知道如何在 HTML 上制作它。需要 ruby​​ 技能将照片保存到目录,以保存此图像的字符串。
    【解决方案2】:

    文本字段不能像您描述的那样模仿输入类型文件。

    您可能还想看看这篇关于使用 HTML、rails 和回形针上传图片的帖子 How to POST files from HTML5 Drag-Drop to a Rails 3 App & Paperclip?

    【讨论】:

    • 我正在用 html 制作整个表单(它对我来说比 ruby​​ 更容易)。请据此说明。我想要的只是用户使用浏览输入 url 的简单文本。然后上传图片。(还有添加新功能、删除、编辑等的附加功能)。在我这边,我希望将该图片保存在资产/图片中/example.jpg 并在图像表中保存了这样形成的地址....我没有得到任何地方。我认为它很简单,但我不理解。请帮助。它很重要
    【解决方案3】:

    很棒的文件附件 ruby​​ gem Paperclip 会为你做这件事。

    如果您不熟悉这些,我强烈建议您观看 Railscasts 的这两个截屏视频:

    1)http://railscasts.com/episodes/196-nested-model-form-part-1

    2) http://railscasts.com/episodes/134-paperclip

    图片删除

    Delete an image with Paperclip

    图片上传

    表单添加了将用于使用fields_for 上传图像的实际表单字段。还要编辑 form_for 调用并将表单标记为多部分,以便它可以接受文件上传。

    <% form_for @user, :html => {:multipart => true} do |f| %>
    
    …
    
    <% f.fields_for :user_images do |builder| %>
    
    <% if builder.object.new_record? %>
    
    <%= builder.label :caption, "Image Caption" %>
    <%= builder.text_field :caption %>
    
    <%= builder.label :photo, "Image File" %>
    <%= builder.file_field :photo %>
    
    <% end %>
    
    <% end %>
    

    【讨论】:

    • 我正在用 html 制作整个表单(它对我来说比 ruby​​ 更容易)。请据此说明。我想要的只是用户使用浏览输入 url 的简单文本。然后上传该图像。(还有用于添加新的、删除、编辑等的附加功能)。在我这边,我希望将该图像保存在资产/图像中/example.jpg 并在图像表中保存了这样形成的地址....我没有得到任何地方。我认为它很简单,但我不理解。请帮助。它很重要
    猜你喜欢
    • 1970-01-01
    • 2011-02-08
    • 1970-01-01
    • 2013-04-15
    • 2012-01-30
    • 1970-01-01
    • 1970-01-01
    • 2012-07-08
    • 1970-01-01
    相关资源
    最近更新 更多