rubyonrails多图上传-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

rubyonrails多图上传-创新互联

ruby on rails 多图上传

成都创新互联主要业务有网站营销策划、网站建设、成都做网站、微信公众号开发、微信平台小程序开发H5开发、程序开发等业务。一次合作终身朋友,是我们奉行的宗旨;我们不仅仅把客户当客户,还把客户视为我们的合作伙伴,在开展业务的过程中,公司还积累了丰富的行业经验、成都营销网站建设资源和合作伙伴关系资源,并逐渐建立起规范的客户服务和保障体系。 

一、首先说一下需要使用的插件以及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代码。

  1. var
  2. function
  3. var
  4. "/assets/swfupload.swf"//存放swf文件的地址
  5. "swfuploadfile.js"//文件上传路径。这里.js意思是,以js方式访问。
  6. "utf8""✓""authenticity_token""<%= form_authenticity_token %>"//跟随上传文件一起的附带参数<'paramsName','paramsValue'>
  7. "100 MB"
  8. "*.png;*.jpg;*.jpeg,*.pjpeg;*.bmp;*.gif"
  9. "All Files"
  10. "fsUploadProgress"
  11. "btnCancel"
  12. false
  13. // Button settings 上传按钮的设置 其实就是初始化swf文件
  14. "/assets/swfupload_button_back.png"//swf文件的背景
  15. "96"
  16. "32"
  17. "spanButtonPlaceHolder"
  18. ''
  19. ".theFont { font-size: 14;color:#000000; font-}"
  20. // The event handler functions are defined in handlers.js
  21. //主要用到这里的成功回调 可以自己写回调方法,这个就是我加的。
  22. // Queue plugin event
  23. new

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

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

然后在页面中加入:

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

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

  •  

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

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

    1. def
    2. do
    3. end
    4. end

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

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

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

     

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

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

    另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    网站题目:rubyonrails多图上传-创新互联
    文章路径:http://kswsj.cn/article/dpcegs.html

    其他资讯