rails中实现kindeditor中的图片上传_Ruby_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > Ruby > rails中实现kindeditor中的图片上传

rails中实现kindeditor中的图片上传

 2012/10/15 10:38:48  chen_miao  程序员俱乐部  我要评论(0)
  • 摘要:FROM:http://blog.sina.com.cn/s/blog_767a3aa7010113k3.html本人使用的rails版本:2.3.4,kindeditor版本:3.5.2,paperclip版本:2.3.11,activerecord版本:2.3.4kindeditor是个非常好用的html编辑器,要在rails中实现kindeditor中的图片上传功能,需做以下操作:前提:安装了GEM包paperclip1、建一个model,我建了个空MODEL
  • 标签:实现 图片 上传 rails 图片上传 Kindeditor

?

FROM: ?http://blog.sina.com.cn/s/blog_767a3aa7010113k3.html

?

本人使用的rails版本:2.3.4, kindeditor版本: 3.5.2,paperclip版本: 2.3.11, activerecord版本:2.3.4kindeditor是个非常好用的html编辑器,要在rails中实现kindeditor中的图片上传功能,需做以下操作:

前提:安装了GEM包 paperclip

1、建一个model,我建了个空MODEL,存储图片文件列表

? ? ? ruby script/generate model image

2、把这个image的MODEL上添加图片属性

? ? ? ruby script/generate paperclip image data

? ? ? 然后 rake db:migrate

3、建立一个controller

? ? ?ruby script/generate controller images upload image_list

? ? ?里面含两个action,用来接收上传和获取列表

4、修改MODEL(image),添加以下代码

? ? ? has_attached_file :data,

? ? ? ? ? ? ? ? ? ? ? ? :styles=>{:medium=>"500x500>",:thumb=>"100x100>"},

? ? ? ? ? ? ? ? ? ? ? ? :whiny => false

5、完成CONTROLLER(images)里的代码

? ?protect_from_forgery :except => :upload

? ?skip_before_filter :verify_authenticity_token

? ?def upload

? ? ? @image = Image.new(:data => params[:imgFile])

? ? ? if @image.save

? ? ? ? render :text => {"error" => 0, "url" => @image.data.url(:medium)}.to_json

? ? ? else

? ? ? ? render ?:text => {"error" => 1}

? ? ? end

? ? end

?

? def image_list

? ? @images = Image.find(:all)

? ? @json = []

? ? for image in @images

? ? ? temp = %Q{{ ?"filesize":#{image.data.size},

? ? ? ? ? ? ? ? ?"filename":"#{image.data_file_name}",

? ? ? ? ? ? ? ? ?"dir_path":"#{image.data.url(:thumb)}",

? ? ? ? ? ? ? ? ?"datetime":"#{image.created_at}"}}

? ? ? @json << temp

? ? end

? ? render :text => ("{\"file_list\":[" << @json.join(",") << "]}")

? end

6、修改kindeditor/plugins/image/image.html

? ? 找到var imageUploadJson,把路径修改为要上传的action路径/images/upload ??

7、修改kindeditor/plugins/file_manager/file_manager.js

? ?找到var fileManagerJson ,修改为 /images/image_list,这里是修改获取列表的action

? ?找到var fileurl和var iconurl,将其赋值都等于data.dir_path,这里的意思是直接用返回路径作为图片路径

? ?找到insertLink函数,这个函数的功能是把选到的图片路径填回到URL框里,由于我们要用中图(medium),修改 KE.$('url', dialogDoc).value = url.replace("/thumb/","/medium/");

?

补充几点注意事项:

a、在config/environment.rb中添加 config.gem "paperclip",否则在执行到upload中的@image = Image.new(:data => params[:imgFile])时会出错,错误信息为:模型Image中未定义方法"undefined method has_attached_file",从而导致前台总是报"服务器出现故障"的错误;

b、上传的图片在服务器上的保存路径如:public/system/datas/"id值"/original/xxx.jpg,而upload中回传给前台的url为render :text => {"error" => 0, "url" => @image.data.url(:medium)}.to_json,会导致前台因找不到图片路径而无法显示,因此需要将上述url修改为"url" => @image.data.url(:original)

c、前台界面的KE属性中可不配置imageUploadJson和fileManagerJson,因第6步和第7步已设置了默认值分别为/images/upload、/images/image_list

?

本人使用的rails版本:2.3.4, kindeditor版本: 3.5.2,paperclip版本: 2.3.11, activerecord版本:2.3.4

发表评论
用户名: 匿名