Submitting a form to a Rails server from jQuery using AJAX does not work in IE11

Question

I am trying to upload some data from a server to Rails using AJAX. The form contains two text inputs and one file input. Here's what my event handler looks like submit:

$("form").on("submit", function(event) {

  event.preventDefault();

  $.ajax({
    url: $(this).attr("action"),
    type: $(this).attr("method"),
    data: new FormData(this),
    contentType: false,
    processData: false
  });
});

This works great in every browser except IE. When I try to submit the form in IE, my Rails server spits out the following error:

Unexpected error while processing request: bad content body
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:117:in `get_current_head_and_filename_and_content_type_and_name_and_body'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:19:in `block in parse'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:17:in `loop'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:17:in `parse'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart.rb:25:in `parse_multipart'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/request.rb:377:in `parse_multipart'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/request.rb:203:in `POST'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/methodoverride.rb:26:in `method_override'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/methodoverride.rb:14:in `call'
        ...

I would be grateful for why this might not work.

Answer 1

<script> ? , . , .. troube js-, ...

Answer 2

IE10/11. , IE , .

[1] http://blog.yorkxin.org/posts/2014/02/06/ajax-with-formdata-is-broken-on-ie10-ie11

Answer 3

csrf token AJAX. -

$(document).ready(function(){
  $("form").on("submit", function(event) {
    event.preventDefault();
    set_csrf_token();
    $.ajax({
      url: $(this).attr("action"),
      type: $(this).attr("method"),
      data: new FormData(this),
      contentType: false,
      processData: false
    });
  });

  function set_csrf_token() {
    // for  protectting from forgery and sending the x-csrf token
    $.ajaxSetup({
      beforeSend : function(xhr) {
        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
      }
    });  
  }
}); 

, , . jQuery, iframe. IE , .jpeg, .pjpeg, .

Answer 4

FormData jQuery Form Plugin, .

$("form").on("submit", function(event) {
  event.preventDefault();
  $(this).ajaxSubmit();
});