HTML5多文件上传字段如何映射到Rails 3中的嵌套模型?

我试图以嵌套形式在文件字段上使用 HTML5多重属性.

模型如下:

class Album < ActiveRecord::Base

  has_many :album_images
  has_many :images,:through => :album_images

  accepts_nested_attributes_for :images

end

class Image < ActiveRecord::Base

  has_many :album_images
  has_many :albums,:through => :album_images

  mount_uploader :filename,ImageUploader

  validates_presence_of :filename

end

风景:

<%= semantic_form_for @album,:url => upload_path do |f| %>
    <%= f.inputs do %>
      <%= f.input :name,:label => 'Album title' %>
    <% end %>

    <%= f.input :images,:as => :file,:input_html => {:multiple => true} %>

    <%= f.buttons do %>
      <%= f.commit_button 'Upload' %>
    <% end %>
  <% end %>

当我使用文件字段:

<%= f.input :images,:input_html => {:multiple => true} %>

我得到:

<input id="album_images" multiple="multiple" name="album[images][]" type="file">

这似乎不是正确的,因为我想我想直接在对象上设置文件名,但我不知道这一点.当我尝试使用此字段上传时,传入的参数如下所示:

"album"=>{"name"=>"2011-01-09","images"=>["IMG_0052.JPG","IMG_0053.JPG","IMG_0054.JPG","IMG_0055.JPG"]}

但是,我收到以下错误

ActiveRecord::AssociationTypeMismatch (Image(#2157004660) expected,got String(#2151988680)):

好的,那个错误可能是因为它刚刚收到一个文件名,而不是一个图像对象.所以我用于文件字段:

<%= f.input :images,:input_html => {:multiple => true,:name => 'album[images][][filename]'} %>

Formtastic生成

<input id="album_images" multiple="multiple" name="album[images][][filename]" type="file">

传入的参数看起来像:

"album"=>{"name"=>"2011-01-09","images"=>[{"filename"=>"IMG_0052.JPG"},{"filename"=>"IMG_0053.JPG"},{"filename"=>"IMG_0055.JPG"}]}

但是我得到这个错误

Image(#2153868680) expected,got ActiveSupport::HashWithindifferentAccess(#2158892780)

那么在Rails中如何设置这个多文件输入归档映射呢?

谢谢.

解决方法

您需要包括:html => {:multipart =>你的form_for(或者你的case语义_form_for)调用,这样你的< form>标签设置为支持文件上传.

然后还原到f.input的原始语法,你应该是对的.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法