使用RubyOnRails实现HTML5 FormData文件上传

Question

我在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

我该如何解决这个错误？

- Caio Tarifa

Answer 1

您看到过这个问题吗？使用jQuery.ajax发送multipart/formdata

看起来您可能遇到了jQuery添加content-type头的问题，导致边界字符串丢失。根据上面链接的问题：

非常重要的是将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
});

我自己没有尝试过，但我认为这可能是你要找的机器人 :)

- Ian Selby

---

当我不使用processData时，会出现非法调用错误。但是使用processData：false，在Rails中会出现内部服务器错误。 - DGM