Question

我有一个表单，其中包含由Paperclip处理的多个file_field输入（用于图像）。

在我的表单上，一旦我选择要上传的文件，我希望它立即上传（在选择时！）并显示图像缩略图（无需使用提交按钮提交已完成的表单）

我能够通过ajax使用remotipart gem提交整个表单...但我不知道如何实现我的目标。

有人可以帮忙吗？如果需要代码或更多解释，请告诉我。非常感谢。

Answer 1

为什么不将文件上传字段分成单独的表单。然后使用jQuery观察文件输入字段，如果更改，则使用ajax提交表单。成功上传后，将表单更改为上传图像的缩略图。

Answer 2

你不能神奇地做到这一点，你必须使用Shanison的答案。如果你使用ajax，你可以使所有看起来无缝和流畅，但实际上最终会发生什么是Shanison所描述的

Answer 3

我会以下列方式解决这个问题。

如果您需要通过XHR上传多个文件，请使用http://github.com/valums/file-uploader。这是一个很棒的插件，它将满足您的需求。

设置完成后，您应该创建Rails控制器来处理这些文件上传（或使用现有文件）。由于您手动上传文件，您必须自己编写上传功能并使用回形针上传并与您的模型连接。

假设您有一个名为Photo的模型。附上：照片。

class UploadsController < ApplicationController
  def upload_photo
    # In order to get contents of the POST request with the photo,
    # you need to read contents of request
    ajax_upload = params[:file].is_a(String)
    file_name = ajax_upload ? params[:file] : params[:file].original_filename
    extension = file_name.split('.').last

    # We have to create a temp file which is going to be used by Paperclip for
    # its upload
    tmp_file = "#{Rails.root}/tmp/file.#{extension}"
    file_id = 0

    # Check if file with the name exists and generate unique path
    while File.exists?(tmp_file) do
      tmp_file_path = "#{Rails.root}/tmp/file#{file_id}.#{extension}"
      id += 1
    end

    # Let's write the file from post request to unique location
    File.open(tmp_file_path, 'wb') do |f|
      if ajax_upload
        f.write request.body.read
      else
        f.write params[:file].read
      end
    end

    # Now that file is saved in temp location, we can use Paperclip to mimic one file
    # upload
    @photo = Photo.new :photo => File.open(tmp_file_path)

    # We'll return javascript to say that the file is uploaded and put its thumbnail in
    # HTML or whatever else you wanted to do with it
    respond_to do |format|
      if @photo.save
        format.js
      else
       format.js { render :json => { :errors => @photo.errors } }
      end
    end
  end
end

这就是如何使用Paperclip在Rails中上传多个文件的AJAX。

如何自动显示图像上传缩略图而无需在rails中提交？

3 个答案: