符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
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的参数,这个是成功后自动给你返回的。具体从哪里给你返回的看下面。
然后在页面中加入:
//上传按钮以及全部取消按钮
之后再加入(前一句是显示上传的过程,包括进度条。后面一句是上传状态,成功 或者失败。)
到这里前端页面的配置基本完成。
然后再到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返回的数据。
完美完成。现在可以试试了。
还有不明白的或者写的不到位的,留言告诉我吧。