ruby on rails 多圖上傳

 

ruby on rails 多圖上傳

一、首先說一下需要使用的插件以及gem包。

1.paperclip(gem,用於後臺文件處理，是一個很強大的工具)

2.swfupload(js/swf插件，用於前端頁面的文件選擇與提交上傳,自帶進度條。)

二、運行環境

1.ruby 1.9.3-p194

2.rails 3.2

三、準備工作。

首先在項目中安裝用於處理上傳文件的包,或者工具。（當然這個也可以自己手寫。）我這裏使用的是paperclip，可以在rubygems.org這裏搜索找到詳細的使用方法以及安裝過程。

然後我們在網站http://code.google.com/p/swfupload/中可以下載swfupload工具。在這個下載的包中我們可以看到有幾個我們需要用到的包，swfupload.js、swfupload.queue.js、swfupload.swfobject.js、

handlers.js、fileprogress.js，以及swfupload.swf文件。其中js文件可以放到assets/javascript下，swf文件可以在assets下新建一個文件夾存放。

準備工作到這裏就完成了。

四、使用步驟。

1.首先在views/demo.html.erb中加入js代碼。

 

var swfu;

window.onload = function() {

   var settings = {

        flash_url : "/assets/swfupload.swf",//存放swf文件的地址

        upload_url: "swfuploadfile.js",//文件上傳路徑。這裏.js意思是，以js方式訪問。

        post_params: {"utf8":"✓","authenticity_token" : "<%= form_authenticity_token %>"},//跟隨上傳文件一起的附帶參數<'paramsName','paramsValue'>

        file_size_limit : "100 MB",

        file_types : "*.png;*.jpg;*.jpeg,*.pjpeg;*.bmp;*.gif",

        file_types_description : "All Files",

        file_upload_limit : 100,

        file_queue_limit : 0,

        custom_settings : {

            progressTarget : "fsUploadProgress",

            cancelButtonId : "btnCancel"

        },

        debug: false,



        // Button settings 上傳按鈕的設置 其實就是初始化swf文件

        button_image_url: "/assets/swfupload_button_back.png",//swf文件的背景

        button_width: "96",

        button_height: "32",

        button_placeholder_id: "spanButtonPlaceHolder",

        button_text: '<span class="theFont"></span>',

        button_text_style: ".theFont { font-size: 14;color:#000000; font-}",

        button_text_left_padding: 12,

        button_text_top_padding: 3,



        // The event handler functions are defined in handlers.js

        file_queued_handler : fileQueued,

        file_queue_error_handler : fileQueueError,

        file_dialog_complete_handler : fileDialogComplete,

        upload_start_handler : uploadStart,

        upload_progress_handler : uploadProgress,

        upload_error_handler : uploadError,

        upload_success_handler : successUpload,//主要用到這裏的成功回調 可以自己寫回調方法，這個就是我加的。

        upload_complete_handler : uploadComplete,

        queue_complete_handler : queueComplete  // Queue plugin event

    };

    swfu = new SWFUpload(settings);

 };

 

 //上傳成功後回調的方法

function successUpload(file, serverData){

//它自己原有的方法是在handler.js中可以看一下。

//可以看到有一個file以及sercerData的參數，這個是成功後自動給你返回的。具體從哪裏給你返回的看下面。

然後在頁面中加入：

//上傳按鈕以及全部取消按鈕

<span id="spanButtonPlaceHolder"></span>
<input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" class="show_none" />

之後再加入(前一句是顯示上傳的過程,包括進度條。後面一句是上傳狀態，成功 或者失敗。)

 

<div class="fieldset flash" id="fsUploadProgress"></div>

<div id="divStatus" class="show_none"></div>

 

  到這裏前端頁面的配置基本完成。

  然後再到controller裏面看一下。因爲在前面配置的時候是以js方式訪問，所以返回也是以js的方式返回。

 

def swfuploadfile
    respond_to do |format|
    format.js
    end
end

 

  接着，再到views/裏面跟你的demo.html.erb同級。新建文件swfuploadfile.js.erb

  這個文件名字要跟controller裏的方法名稱一致。

  然後在swfuploadfile.js.erb中寫你要做的操作，這個文件裏面的內容就是上面js中serverData返回的數據。

 

  完美完成。現在可以試試了。

還有不明白的或者寫的不到位的，留言告訴我吧。