使用 RubyOnRails 上传 HTML5 FormData 文件

Posted

技术标签:

【中文标题】使用 RubyOnRails 上传 HTML5 FormData 文件【英文标题】:HTML5 FormData file upload with RubyOnRails 【发布时间】:2012-09-08 01:06:24 【问题描述】:

我使用此脚本在 Rails 3.2.8 应用程序中使用 html5 FormData 上传文件(一个接一个)。

http://jsfiddle.net/RamPr/

$('.uploader input:file').on('change', function() 
  $this = $(this);

  $('.alert').remove();

  $.each($this[0].files, function(key, file) 
    $('.files').append('<li>' + file.name + '</li>');

    data = new FormData();
    data.append(file.name, file);

    $.ajax(
      url: $('.uploader').attr('action'),
      contentType: 'multipart/form-data',
      type: 'POST',
      dataType: 'json',
      data: data,
      processData: false
    );
  );
);

但是当我上传文件时,我在控制台中收到此错误:

webrick/server.rb:191:in `block in start_thread' ERROR ArgumentError: invalid %-encoding ("filename.jpeg" Content-Type: image/jpeg

我该如何解决这个错误?

【问题讨论】:

【参考方案1】:

你见过这个问题吗? Sending multipart/formdata with jQuery.ajax

看起来您可能会遇到 jQuery 添加内容类型标头,这会导致边界字符串丢失。从上面的链接问题:

您必须将contentType 选项设置为false,从而强制jQuery 不为您添加Content-Type 标头,否则将缺少边界字符串。此外,您必须将processData 标志设置为false,否则,jQuery 会尝试将您的 FormData 转换为字符串,这将失败。

基于此,试一试:

$.ajax(
  url: $('.uploader').attr('action'),
  contentType: false,
  cache: false,
  processData: false,
  type: 'POST',
  dataType: 'json',
  data: data
);

我自己没有尝试过,但我怀疑这可能是您正在寻找的机器人 :)

【讨论】:

当我不使用 processData 时,我得到了非法调用。但是使用 processData: false,我在 rails 中遇到内部服务器错误。

以上是关于使用 RubyOnRails 上传 HTML5 FormData 文件的主要内容,如果未能解决你的问题,请参考以下文章

jquery文件上传控件 Uploadify

使用 React、Ruby on rails 5 和 CarrierWave 多次上传文件

从 Ruby on Rails 多次上传到 Amazon S3 - 使用啥后台处理系统?

文件(图片)上传组件

Ruby on Rails - 回形针回滚事务

使用 html5 分块上传文件