最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
rubyonrails多圖上傳

ruby on rails 多圖上傳

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),昆玉網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:昆玉等地區(qū)。昆玉做網(wǎng)站價(jià)格咨詢:18982081108

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

1.paperclip(gem,用于后臺(tái)文件處理，是一個(gè)很強(qiáng)大的工具)

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

二、運(yùn)行環(huán)境

1.ruby 1.9.3-p194

2.rails 3.2

三、準(zhǔn)備工作。

首先在項(xiàng)目中安裝用于處理上傳文件的包,或者工具。（當(dāng)然這個(gè)也可以自己手寫。）我這里使用的是paperclip，可以在rubygems.org這里搜索找到詳細(xì)的使用方法以及安裝過(guò)程。

然后我們?cè)诰W(wǎng)站http://code.google.com/p/swfupload/中可以下載swfupload工具。在這個(gè)下載的包中我們可以看到有幾個(gè)我們需要用到的包，swfupload.js、swfupload.queue.js、swfupload.swfobject.js、

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

準(zhǔn)備工作到這里就完成了。

四、使用步驟。

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

 

  1. var swfu; 
  2.  
  3. window.onload = function() { 
  4.  
  5.    var settings = { 
  6.  
  7.         flash_url : "/assets/swfupload.swf",//存放swf文件的地址 
  8.  
  9.         upload_url: "swfuploadfile.js",//文件上傳路徑。這里.js意思是，以js方式訪問(wèn)。 
  10.  
  11.         post_params: {"utf8":"✓","authenticity_token" : "<%= form_authenticity_token %>"},//跟隨上傳文件一起的附帶參數(shù)<'paramsName','paramsValue'> 
  12.  
  13.         file_size_limit : "100 MB", 
  14.  
  15.         file_types : "*.png;*.jpg;*.jpeg,*.pjpeg;*.bmp;*.gif", 
  16.  
  17.         file_types_description : "All Files", 
  18.  
  19.         file_upload_limit : 100, 
  20.  
  21.         file_queue_limit : 0, 
  22.  
  23.         custom_settings : { 
  24.  
  25.             progressTarget : "fsUploadProgress", 
  26.  
  27.             cancelButtonId : "btnCancel" 
  28.  
  29.         }, 
  30.  
  31.         debug: false, 
  32.  
  33.  
  34.  
  35.         // Button settings 上傳按鈕的設(shè)置 其實(shí)就是初始化swf文件 
  36.  
  37.         button_p_w_picpath_url: "/assets/swfupload_button_back.png",//swf文件的背景 
  38.  
  39.         button_width: "96", 
  40.  
  41.         button_height: "32", 
  42.  
  43.         button_placeholder_id: "spanButtonPlaceHolder", 
  44.  
  45.         button_text: '', 
  46.  
  47.         button_text_style: ".theFont { font-size: 14;color:#000000; font-}", 
  48.  
  49.         button_text_left_padding: 12, 
  50.  
  51.         button_text_top_padding: 3, 
  52.  
  53.          
  54.  
  55.         // The event handler functions are defined in handlers.js 
  56.  
  57.         file_queued_handler : fileQueued, 
  58.  
  59.         file_queue_error_handler : fileQueueError, 
  60.  
  61.         file_dialog_complete_handler : fileDialogComplete, 
  62.  
  63.         upload_start_handler : uploadStart, 
  64.  
  65.         upload_progress_handler : uploadProgress, 
  66.  
  67.         upload_error_handler : uploadError, 
  68.  
  69.         upload_success_handler : successUpload,//主要用到這里的成功回調(diào) 可以自己寫回調(diào)方法，這個(gè)就是我加的。 
  70.  
  71.         upload_complete_handler : uploadComplete, 
  72.  
  73.         queue_complete_handler : queueComplete  // Queue plugin event 
  74.  
  75.     }; 
  76.  
  77.     swfu = new SWFUpload(settings); 
  78.  
  79.  }; 

 

 //上傳成功后回調(diào)的方法

  1. function successUpload(file, serverData){ 
  2.  
  3. //它自己原有的方法是在handler.js中可以看一下。 
  4.  
  5. //可以看到有一個(gè)file以及sercerData的參數(shù)，這個(gè)是成功后自動(dòng)給你返回的。具體從哪里給你返回的看下面。 

然后在頁(yè)面中加入：

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

  1.  
  2.  

之后再加入(前一句是顯示上傳的過(guò)程,包括進(jìn)度條。后面一句是上傳狀態(tài)，成功 或者失敗。)

 

 
  •  
    •  

     

     到這里前端頁(yè)面的配置基本完成。

     然后再到controller里面看一下。因?yàn)樵谇懊媾渲玫臅r(shí)候是以js方式訪問(wèn)，所以返回也是以js的方式返回。

     

    1. def swfuploadfile 
    2.     respond_to do |format| 
    3.     format.js 
    4.     end 
    5. end 

     

     接著，再到views/里面跟你的demo.html.erb同級(jí)。新建文件swfuploadfile.js.erb

     這個(gè)文件名字要跟controller里的方法名稱一致。

     然后在swfuploadfile.js.erb中寫你要做的操作，這個(gè)文件里面的內(nèi)容就是上面js中serverData返回的數(shù)據(jù)。

     

     完美完成?，F(xiàn)在可以試試了。

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

     


    網(wǎng)頁(yè)名稱：rubyonrails多圖上傳
    分享鏈接：http://fisionsoft.com.cn/article/gsdgsg.html