如何自動顯示圖片上傳縮略圖而無需在rails中提交？

我有一個窗體有多個file_field輸入（用於圖像）由Paperclip處理。如何自動顯示圖片上傳縮略圖而無需在rails中提交？

在我的形式，一旦我選擇要上傳的文件，我希望它立即上傳（上選擇！），並顯示圖像的縮略圖（無需與提交按鈕提交填寫完整的表格）

我能夠使用remotipart gem通過ajax提交整個表單...但我不知道如何實現我的目標。

任何人都可以幫忙嗎？如果需要代碼或更多解釋，請告訴我。非常感謝。

來源

2011-07-23 mmgg

我會按以下方式處理這個問題。

如果您需要通過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

這是如何在帶有回形針的Rails中使用AJAX上傳多個文件。

來源

2011-07-23 12:44:12 instinctious

您好，感謝您編寫此代碼！但是，此方法是否需要提交表單才能顯示上傳的文件？第一行顯示「＃爲了獲取POST請求的內容照片，＃你需要讀取請求的內容「我試圖顯示上傳文件，只要用戶點擊」BROWSE「並選擇文件（當然它成功上傳）。在？對不起，如果我誤解了。非常感謝您的幫助 – mmgg

如果您無法在您的服務中提供服務，您會如何展示？您必須將其上傳到您的服務器，然後才能提供服務。是的，這適用於此。 – instinctious

爲什麼不將文件上傳字段分解爲單獨的表單。然後使用jQuery觀察文件輸入字段，如果更改，然後使用ajax提交表單。成功上傳後，將表單更改爲上傳圖片的縮略圖。

來源

2011-07-23 02:27:23 Shanison

感謝您的提示Shanison。我實際上是使用嵌套的形式爲文件字段（通過nested_form gem）根據需要動態添加文件字段......但我想我需要將它們包裝在自己的form_for中？如果你在任何地方知道任何這樣的事情的例子，這將是非常有用的。再次感謝！ – mmgg

對不起，我沒有任何代碼示例。但我認爲用這種方式實現它不會太困難。我做了一個搜索並找到了這個http://www.jquery4u.com/tutorials/thumbnail-image-upload-ajaxphp。使用ajax將文件上傳到服務器端並生成縮略圖，然後單擊提交時將一起提交多個文件。演示：http://blogoola.com/signup/這隻有一個文件上傳，但我認爲你可以擴展它。 – Shanison

嗨Shanison，我一直試圖得到這個工作，但我仍然卡住:(......當你說把文件輸入分成單獨的形式，你的意思是使用fields_for塊嗎？或者實際上單獨的form_for塊？如何在我的已存在的表單中包含另一個表單？我可以在一個視圖中使用多個表單嗎？ – mmgg

你不能這麼做，你必須使用Shanison的答案。如果你使用ajax，你可以使所有的東西看起來無縫和流暢，但實際上最終會發生什麼是Shanison描述的

來源

2011-07-23 07:18:38 noli

如何自動顯示圖片上傳縮略圖而無需在rails中提交？

回答

相關問題