Rails 不刷新 上传文件

glorySpring · 2012年10月25日 · 最后由 zqalyc 回复于 2013年05月08日 · 8103 次阅读

最近在做一个图片上传的功能,要求是 不刷新页面,并且显示上传的文件。结果翻了半天也没有太好的方式。。自己试了一下,提交 form 表单如果是纯文字的话,实现,但是加上 file_field 以后就撤了。。大家,有好点的办法嘛?我用的 paperclip 来 处理上传的文件。运行环境 ruby -1.9.3 rails 3.2.8

#1 楼 @hupengxing 嗯,围观一下。灰常感谢。。哈哈。速度够快。

匿名 #3 2012年10月25日

文件上传从本质上不支持 ajax 方式,如果要上传文件,必然会刷新。一般使用 iframe 的方式模拟 ajax 文件上传. 之前用过 jquery ajaxuploader 插件,现在比较推荐 jquery uploadify http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html

#3 楼 @wity_lv 嗯,我是用 iframe 模拟,可是 respond_to do |format| format.js end 它并没有去执行这个 js 而是直接在页面上原样显示了 js 里面的内容。。这个我有点搞不懂、

匿名 #5 2012年10月25日

#4 楼 @glorySpring 这个不懂了,之前后台是用 java 实现的。

#5 楼 @wity_lv 好的,受教了。其实不是特别想用 js 插件来做,既然这样,我尝试一下使用插件吧。写了。

单张上传的话其实简单 ajaxSubmit + form 后台

def upload_photo
  photo = current_user.attachments.build(:photo => params[:photo])
  render :text => { :success => photo.save, :id => photo.id, :photo_name => params[:photo].original_filename }.to_json
end

js

$('.attachment_panel.photo').find('a.submit').click ->
  $this = $(this)
  $file = $this.prev('input')
  if $file.val()?
    $this.parents('form').ajaxSubmit(
      dataType: 'json'
      beforeSend: ->
        $('a.uploadImage').find('span').text('正在上传...')
      success: (data) ->
        if data.success
          $('a.uploadImage').find('span').text(data.photo_name)
          $('#newAssistance').find('textarea').data('attachment_id', data.id)
          $this.closest('.attachment_panel').hide()
        else
          $('a.uploadImage').find('span').text('上传图片')
    )

#7 楼 @fresh_fish 嗯是单个图片上传。说实话 没太看懂。不过谢谢了。又知道一个办法。可以的话能不能解释一下呢?

#8 楼 @glorySpringajaxSubmit 这个插件,可以实现 ajax 提交表单,然后你在后台处理上传过程就行了 插件是 jquey.form.js

#9 楼 @fresh_fish 嗯,好的,我看一下,把这个玩意加上。

这篇文章从原理上有透彻的讲解,阮一峰的 "文件上传的渐进式增强"

#13 楼 @lgn21st 哈哈,大哥终于出现了。。。逛这个论坛总能看到你开心的笑脸。谢谢,我看一下。

jQuery-file-upload

可试一下 Xproer.HttpUploader 这个控件。

最近看很多人提这个 https://www.filepicker.io/

有人用过么

使用 javascript 的 FileReader+FormData 就可以实现多图 ajax 上传了,新接口还有上传进度

#17 楼 @knwang 这个能上传视频么?

#17 楼 @knwang 看着还可以 我也想知道。。能不能上传视频 或者音频之类的呢?有时间看一下。

#19 楼 @xiaolai #20 楼 @glorySpring

应该可以啊 音频视频的都是文件

这个的厉害支持从云服务中选文件或直接存到云服务中,现在已有了很多的 mashups

#21 楼 @knwang 国外的环境就是好啊!在国内,还得担心被墙

用一个隐藏的 iframe 可以搞定,不妨试试看

#21 楼 @knwang 牛 B 啊。回头真得弄一下,现在做的项目正好需要这个东西,还在考虑怎么实现呢。。哈哈。

#15 楼 @ruby_sky 嗯 这个我也看了,等再比较一下其他的好办法,选出个最好的来。嘿。。。谢了。

#17 楼 @knwang ok,这里果然好多人,本来以为国内用 ror 的比较少,现在才知道 错的离谱了。谢了。

#18 楼 @reducm 试试看,嘿,谢了。

#28 楼 @glorySpring http://railscasts.com/episodes/381-jquery-file-upload 昨晚看这个视频搞定了 ajax 文件上传,jquery-file-upload + carrierwave

#29 楼 @suupic OK 没有问题。3q for your help.

#29 楼 @suupic #23 楼 @uudui #18 楼 @reducm #13 楼 @lgn21st

这个玩意,原来是这样子的。搞定了,其实挺简单的,包括进度条,图片即时显示,以及旋转的菊花。。。哈哈。

#31 楼 @glorySpring 请问现在找到最好的解决办法了吗?能否分享一下?谢谢

#7 楼 @fresh_fish 我用的 carrierwave 上传单张图片,使用 jquery 怎么解决?github 下载了几个源代码看不太懂。谢谢

需要 登录 后方可回复, 如果你还没有账号请 注册新账号