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代码。

varswfu;window.onload=function(){varsettings={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:"100MB",file_types:"*.png;*.jpg;*.jpeg,*.pjpeg;*.bmp;*.gif",file_types_description:"AllFiles",file_upload_limit:100,file_queue_limit:0,custom_settings:{progressTarget:"fsUploadProgress",cancelButtonId:"btnCancel"},debug:false,//Buttonsettings上传按钮的设置其实就是初始化swf文件button_p_w_picpath_url:"/assets/swfupload_button_back.png",//swf文件的背景button_width:"96",button_height:"32",button_placeholder_id:"spanButtonPlaceHolder",button_text:'<spanclass="theFont"></span>',button_text_style:".theFont{font-size:14;color:#000000;font-}",button_text_left_padding:12,button_text_top_padding:3,//Theeventhandlerfunctionsaredefinedinhandlers.jsfile_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//Queuepluginevent};swfu=newSWFUpload(settings);};

//上传成功后回调的方法

functionsuccessUpload(file,serverData){//它自己原有的方法是在handler.js中可以看一下。//可以看到有一个file以及sercerData的参数，这个是成功后自动给你返回的。具体从哪里给你返回的看下面。

然后在页面中加入：

//上传按钮以及全部取消按钮

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

之后再加入(前一句是显示上传的过程,包括进度条。后面一句是上传状态，成功 或者失败。)

<divclass="fieldsetflash"id="fsUploadProgress"></div><divid="divStatus"class="show_none"></div>

到这里前端页面的配置基本完成。

然后再到controller里面看一下。因为在前面配置的时候是以js方式访问，所以返回也是以js的方式返回。

defswfuploadfilerespond_todo|format|format.jsendend

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

这个文件名字要跟controller里的方法名称一致。

然后在swfuploadfile.js.erb中写你要做的操作，这个文件里面的内容就是上面js中serverData返回的数据。

完美完成。现在可以试试了。

还有不明白的或者写的不到位的，留言告诉我吧。