Rails 4 + carrierwave + Ajax + BootStrap Modal弹出窗口下的文件上传

从PHP开发转到Rails学习已经快两个月了,对Rails简直是相见恨晚!不过,Rails框架的很多的魔术用法再加上devise等各种大神级的gem,对初学者却是一把双刃剑:好处就不用多说了,坏处就是很多功能的内部实现原理不明白,一旦碰到小问题,不知道该如何下手。

为了学习Rails,给做代购的朋友做了一个商品管理小系统。有一个页面使用了Modal窗口+Ajax方式实现公司的“新增”和“修改”。其中表单里面有logo的文件上传功能,服务器端采用的是carrierwave处理文件上传。在使用脚手架创建的页面上测试时,图片上传等都没问题,但是改为ajax方式以后,发现只要有文件上传,就会提示找不到模板(这时候已经改成xxx.js.erb方式了)。而如果不选择文件的话,只填写其它字段的话ajax表单是没有问题。

去Google上搜了一下,发现很多人都碰到过这个问题。有人推荐了remotipart这个gem,安装以后,发现真的解决了这个问题。 https://os.alfajango.com/remotipart/

安装方法很简单: 在Gemfile里面添加

gem "remotipart", "~> 1.0"

执行bundle

bundle install

app/assets/javascripts/application.js里面添加引用

//= require jquery.remotipart

这样一来file字段就和其它的文本字段一样,都能正常使用ajax方式上传了。

该Gem的作者给出了问题的原因以及实现原理: https://www.alfajango.com/blog/ajax-file-uploads-with-the-iframe-method/

这次碰到的一个坑,其实是Ajax一个固有的局限。Ajax的基础是利用了浏览器的XMLHttpRequest功能,而XMLHttpRequest本身是不支持直接文件上传的,所以只能通过变通的办法。上面的gem的作者的方法是动态使用了一个iframe。

Share Comments
comments powered by Disqus