如何在Rails 4中使用jQuery文件上传？

Question

我有一个简单的模型叫做RealEstateListing.

用户可以创建RealEstateListing并描述他们正在出售/租赁的房屋.我们希望允许用户为其列表上传最多5张图片,我们发现此插件名为jQuery File Upload.

http://blueimp.github.io/jQuery-File-Upload/

---

不幸的是,Rails的所有文档和指南似乎都停滞在Rails 3.2.x中

使用这个非常简单的模型示例,如何使用此插件上传图像并将图像与RealEstateListing.使用Rails 4 相关联？

Answer 1

根据以下链接,Rails 4似乎支持jQuery File Upload:Gems Ready for Rails 4.

如果您想要使用Paperclip Gem执行文件上传,请按照我为您准备的指南.我从Pranava Swaroop学到了这个方法.

替代解决方案在以下链接:Stackoverflow:Rails 4多文件上传解决方案,Stackoverflow:Jquery文件上传到rails 4

1-将名为"image"的属性添加到R​​ealEstateListing资源中.然后运行'rake db:migrate'和/或'rake db:migrate RAILS_ENV = development'作为更新架构和数据库的相关内容.

即

class AddImageFieldsToRealEstateListing < ActiveRecord::Migration
  def change
    add_column :realestatelisting, :image_file_name, :string
    add_column :realestatelisting, :image_content_type, :string
    add_column :realestatelisting, :image_file_size, :integer
    add_column :realestatelisting, :image_uploaded_at, :datetime
  end
end

2-更新您的Gemfile并使用Paperclip gem和Amazon Web Services等服务进行图像上传.然后运行'bundle install'来更新Gemfile.lock

gem 'paperclip'
gem 'aws-sdk'

3-更新RealEstateListing控制器以确保允许'image'参数

即

def realestatelisting_params
  params.require(:realestatelisting).permit(:name,:image)
end

4-更新app/helpers/application_helper.rb

即

def image_for_realestatelisting(house)
  if house.image.exists?
    image_tag(house.image.url, size:'200x200')
  else
    image_tag('image.jpg')
  end
end

5-使用图像上传功能更新RealEstateListing模型

即

has_attached_file :image
validates_attachment :image, 
                     :content_type => { :content_type => ['image/jpeg', 'image/png'] }, 
                     :size => { :less_than => 2.megabyte }             

6-使用图像上传字段更新RealEstateListing .html.erb视图

即创建上传

<div>
  <div>
    <%= f.label :image %><br/>
    <%= f.file_field :image %>
  </div>
</div>
<div>
  <%= f.submit "Create" %>
</div>

即显示上传

<div>
  <%= image_for_realestatelisting(@house) %>
</div>

请注意,Paperclip gem是一个抽象的Ruby库,在Ruby on Rails应用程序中使用它来降低ActiveRecord模型中文件上载的复杂性RealEstateListing.AWS SDK gem aws-sdk与Paperclip gem结合使用,提供了一个API客户端,用于将图像上传到应用程序进行模型验证,然后再存储在Amazon的S3文件托管服务上,以独立扩展应用程序的图像文件资源.Paperclip gem的规范包括处理图像文件的类方法选项,如ActiveRecord Model属性.Paperclip帮助器方法(has_attached_file)声明属性符号:image和图像文件附件之间的模型关联,而其辅助方法validates_attachment方便地包装多个属性(即图像文件附件的大小和MIME内容类型以防止XSS攻击)进行验证.