增加了图片上传

Gemfile

@@ -24,6 +24,9 @@ gem 'jquery-rails'
 
 gem 'devise', '2.1.0'
 
+gem 'carrierwave', "0.6.2"
+gem 'mini_magick', "3.3"
+
 
 # To use ActiveModel has_secure_password
 # gem 'bcrypt-ruby', '~> 3.0.0'

Gemfile.lock

@@ -31,6 +31,9 @@ GEM
     arel (3.0.2)
     bcrypt-ruby (3.0.1)
     builder (3.0.0)
+    carrierwave (0.6.2)
+      activemodel (>= 3.2.0)
+      activesupport (>= 3.2.0)
     coffee-rails (3.2.2)
       coffee-script (>= 2.2.0)
       railties (~> 3.2.0)
@@ -58,6 +61,8 @@ GEM
       mime-types (~> 1.16)
       treetop (~> 1.4.8)
     mime-types (1.18)
+    mini_magick (3.3)
+      subexec (~> 0.1.0)
     multi_json (1.3.6)
     orm_adapter (0.0.7)
     polyglot (0.3.3)
@@ -96,6 +101,7 @@ GEM
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
     sqlite3 (1.3.6)
+    subexec (0.1.0)
     thor (0.14.6)
     tilt (1.3.3)
     treetop (1.4.10)
@@ -112,9 +118,11 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  carrierwave (= 0.6.2)
   coffee-rails (~> 3.2.1)
   devise (= 2.1.0)
   jquery-rails
+  mini_magick (= 3.3)
   rails (= 3.2.3)
   sass-rails (~> 3.2.3)
   sqlite3

app/assets/javascripts/images.js.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

app/assets/stylesheets/images.css.scss

@@ -0,0 +1,12 @@
+#container{
+  .clearfix { clear:both;}
+  #images-pane{
+    width: 100%;
+    clear: both;
+    .pane{
+      width: 160px;
+      padding: 5px 3px;
+      float:left;
+    }
+  }
+}

app/assets/stylesheets/scaffolds.css.scss

@@ -0,0 +1,56 @@
+body {
+  background-color: #fff;
+  color: #333;
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size: 13px;
+  line-height: 18px; }
+
+p, ol, ul, td {
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size: 13px;
+  line-height: 18px; }
+
+pre {
+  background-color: #eee;
+  padding: 10px;
+  font-size: 11px; }
+
+a {
+  color: #000;
+  &:visited {
+    color: #666; }
+  &:hover {
+    color: #fff;
+    background-color: #000; } }
+
+div {
+  &.field, &.actions {
+    margin-bottom: 10px; } }
+
+#notice {
+  color: green; }
+
+.field_with_errors {
+  padding: 2px;
+  background-color: red;
+  display: table; }
+
+#error_explanation {
+  width: 450px;
+  border: 2px solid red;
+  padding: 7px;
+  padding-bottom: 0;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+  h2 {
+    text-align: left;
+    font-weight: bold;
+    padding: 5px 5px 5px 15px;
+    font-size: 12px;
+    margin: -7px;
+    margin-bottom: 0px;
+    background-color: #c00;
+    color: #fff; }
+  ul li {
+    font-size: 12px;
+    list-style: square; } }

app/controllers/images_controller.rb

@@ -0,0 +1,86 @@
+class ImagesController < ApplicationController
+
+  before_filter :authenticate_user!
+
+  # GET /images
+  # GET /images.json
+  def index
+    @images = Image.all
+
+    respond_to do |format|
+      format.html # index.html.erb
+      format.json { render json: @images }
+    end
+  end
+
+  # GET /images/1
+  # GET /images/1.json
+  def show
+    @image = Image.find(params[:id])
+
+    respond_to do |format|
+      format.html # show.html.erb
+      format.json { render json: @image }
+    end
+  end
+
+  # GET /images/new
+  # GET /images/new.json
+  def new
+    @image = Image.new
+
+    respond_to do |format|
+      format.html # new.html.erb
+      format.json { render json: @image }
+    end
+  end
+
+  # GET /images/1/edit
+  def edit
+    @image = Image.find(params[:id])
+  end
+
+  # POST /images
+  # POST /images.json
+  def create
+    @image = current_user.images.new(params[:image])
+
+    respond_to do |format|
+      if @image.save
+        format.html { redirect_to @image, notice: 'Image was successfully created.' }
+        format.json { render json: @image, status: :created, location: @image }
+      else
+        format.html { render action: "new" }
+        format.json { render json: @image.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # PUT /images/1
+  # PUT /images/1.json
+  def update
+    @image = Image.find(params[:id])
+
+    respond_to do |format|
+      if @image.update_attributes(params[:image])
+        format.html { redirect_to @image, notice: 'Image was successfully updated.' }
+        format.json { head :no_content }
+      else
+        format.html { render action: "edit" }
+        format.json { render json: @image.errors, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  # DELETE /images/1
+  # DELETE /images/1.json
+  def destroy
+    @image = Image.find(params[:id])
+    @image.destroy
+
+    respond_to do |format|
+      format.html { redirect_to images_url }
+      format.json { head :no_content }
+    end
+  end
+end

app/controllers/photos_controller.rb

@@ -1,4 +1,6 @@
 class PhotosController < ApplicationController
+
   def index
   end
+
 end

app/helpers/images_helper.rb

@@ -0,0 +1,2 @@
+module ImagesHelper
+end

app/models/image.rb

@@ -0,0 +1,10 @@
+class Image < ActiveRecord::Base
+  attr_accessible :file, :order
+
+  mount_uploader :file, ImageUploader
+
+  validates :file, :presence => true
+
+  belongs_to :user
+
+end

app/models/user.rb

@@ -8,4 +8,6 @@ class User < ActiveRecord::Base
   # Setup accessible (or protected) attributes for your model
   attr_accessible :email, :password, :password_confirmation, :remember_me
   # attr_accessible :title, :body
+
+  has_many :images
 end

app/uploaders/image_uploader.rb

@@ -0,0 +1,63 @@
+# encoding: utf-8
+
+class ImageUploader < CarrierWave::Uploader::Base
+
+  # Include RMagick or MiniMagick support:
+  # include CarrierWave::RMagick
+  include CarrierWave::MiniMagick
+
+  # Include the Sprockets helpers for Rails 3.1+ asset pipeline compatibility:
+  # include Sprockets::Helpers::RailsHelper
+  # include Sprockets::Helpers::IsolatedHelper
+
+  # Choose what kind of storage to use for this uploader:
+  storage :file
+  # storage :fog
+
+  # Override the directory where uploaded files will be stored.
+  # This is a sensible default for uploaders that are meant to be mounted:
+  def store_dir
+    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
+  end
+
+  # Provide a default URL as a default if there hasn't been a file uploaded:
+  # def default_url
+  #   # For Rails 3.1+ asset pipeline compatibility:
+  #   # asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
+  #
+  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
+  # end
+
+  # Process files as they are uploaded:
+  # process :scale => [200, 300]
+  #
+  # def scale(width, height)
+  #   # do something
+  # end
+
+  # Create different versions of your uploaded files:
+  version :thumb do
+    process resize_to_fill: [150, 150]
+  end
+
+  version :main do 
+    process resize_to_fill: [600, 400]
+  end
+
+  version :cif do 
+    process resize_to_fill: [320, 240]
+  end
+
+  # Add a white list of extensions which are allowed to be uploaded.
+  # For images you might use something like this:
+  # def extension_white_list
+  #   %w(jpg jpeg gif png)
+  # end
+
+  # Override the filename of the uploaded files:
+  # Avoid using model.id or version_name here, see uploader/store.rb for details.
+  # def filename
+  #   "something.jpg" if original_filename
+  # end
+
+end

app/views/images/_form.html.erb

@@ -0,0 +1,24 @@
+<%= form_for(@image, :html => {:multipart => true}) do |f| %>
+  <% if @image.errors.any? %>
+    <div id="error_explanation">
+      <h2><%= pluralize(@image.errors.count, "error") %> 不能保存数据:</h2>
+      <ul>
+      <% @image.errors.full_messages.each do |msg| %>
+        <li><%= msg %></li>
+      <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="field">
+    <%= f.label :file %><br />
+    <%= f.file_field :file %>
+  </div>
+  <div class="field">
+    <%= f.label :order %><br />
+    <%= f.number_field :order, :value => 1 %>
+  </div>
+  <div class="actions">
+    <%= f.submit %>
+  </div>
+<% end %>

app/views/images/edit.html.erb

@@ -0,0 +1,6 @@
+<h1>Editing image</h1>
+
+<%= render 'form' %>
+
+<%= link_to 'Show', @image %> |
+<%= link_to 'Back', images_path %>

app/views/images/index.html.erb

@@ -0,0 +1,16 @@
+<p>
+<h1>图片列表</h1>  <%= link_to '上传图片', new_image_path %>
+</p>
+<div id="images-pane">
+<% @images.each do |image| %>
+<div class="pane">
+  <%=image_tag image.file.url("thumb"), :width => 150 %>
+  <p>
+    <%= link_to '修改', edit_image_path(image) %>
+    <%= link_to '删除', image, confirm: '确定删除?', method: :delete %>
+  </p>
+</div>
+<% end %>
+</div>
+<div class="clearfix">
+

app/views/images/new.html.erb

@@ -0,0 +1,5 @@
+<h1>上传图片</h1>
+
+<%= render 'form' %>
+
+<%= link_to '返回', images_path %>

app/views/images/show.html.erb

@@ -0,0 +1,20 @@
+<p id="notice"><%= notice %></p>
+
+<p>
+  <b>File:</b>
+  <%= @image.file %>
+</p>
+
+<p>
+  <b>User:</b>
+  <%= @image.user_id %>
+</p>
+
+<p>
+  <b>Order:</b>
+  <%= @image.order %>
+</p>
+
+
+<%= link_to 'Edit', edit_image_path(@image) %> |
+<%= link_to 'Back', images_path %>

config/locales/zh.yml

@@ -229,7 +229,12 @@ zh:
       <<: *errors
     models:
       user: 用户
+      image: 图片
     attributes:
       user:
         email: 邮箱
-        password: 密码
+        password: 密码
+      image:
+        file: 文件
+        user_id: 用户
+        order: 顺序