rubyonrails多图上传

ruby on rails 多图上传

成都创新互联是一家专注于成都网站建设、成都网站设计与策划设计,昆玉网站建设哪家好?成都创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:昆玉等地区。昆玉做网站价格咨询:18982081108

一、首先说一下需要使用的插件以及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_p_w_picpath_url: "/assets/swfupload_button_back.png",//swf文件的背景 
 
        button_width: "96", 
 
        button_height: "32", 
 
        button_placeholder_id: "spanButtonPlaceHolder", 
 
        button_text: '', 
 
        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的参数，这个是成功后自动给你返回的。具体从哪里给你返回的看下面。 

然后在页面中加入：

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

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