使用RubyOnRails上传HTML5 FormData文件

Cai*_*ifa 7 ajax html5 file-upload ruby-on-rails form-data

我使用这个脚本在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
    });
  });
});
Run Code Online (Sandbox Code Playgroud)

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

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

我该如何解决这个错误?

Ian*_*lby 17

你看过这个问题吗?使用jQuery.ajax发送multipart/formdata

看起来您可能会遇到添加内容类型标头的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
});
Run Code Online (Sandbox Code Playgroud)

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