使用 RubyOnRails 上传 HTML5 FormData 文件

【问题标题】：HTML5 FormData file upload with RubyOnRails使用 RubyOnRails 上传 HTML5 FormData 文件
【发布时间】：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

我该如何解决这个错误？

【问题讨论】：

标签： ruby-on-rails ajax html file-upload form-data

【解决方案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 中遇到内部服务器错误。