Как загрузить файл с данными из формы с помощью ajax?

Question

[Михаил]

То, что в старых браузерах это можно делать с помощью скрытого iframe я знаю. Проблема немного другая. Не могу всё собрать воедино.

Ситуация примерно такая.
На сайте для проверки формы используется BootstrapValidator
Обрабатывать форму можно соответственно примерно так:

submitHandler: function(validator, form, submitButton) {
             $.ajax({
                 type: "POST",
                 url: "link",
                 data: form.serialize(),
                 success: function(result) {

                 }
             });
         }

Необходимо ко всему прочему загружать ещё файл, всё должно уходить одним POST на сервер, дабы со стороны бекенда можно сразу было обрабатывать и данные с формы и сам файл.
Нужна поддержка IE не ниже 8. Как сюда грамотно прикрутить загрузку файла скажем через скрытый iframe?

Answer 1

[Илья Лазарев]

Вот, держи, должно натолкнуть на мысли.

requesting_controller

def create
    @requesting = Requesting.create(requesting_params)
    dir = upload_dir
    FileUtils.mkdir_p(dir) unless File.directory?(dir)

    counter = 0

    params[:uploadedFiles].each do |file_element|
      file_element.original_filename = format('%02d', counter) + '__' + file_element.original_filename

      file = nil
      File.open(Rails.root.join(dir, file_element.original_filename), 'wb') do |_file|
        _file.write(file_element.read)
        file = _file
      end

      proposal_file = ProposalFile.new
      proposal_file.path = file_element
      proposal_file.path = File.open(file)
      proposal_file.requesting = @requesting
      proposal_file.save!

      counter += 1
    end
  end

модель

class Requesting < ActiveRecord::Base
  has_many :proposal_files
  belongs_to :user
end

вьюха

<div id = 'submit_handler'><script id="new-file-input" type="text/x-tmpl">
       <div class="file_input_wrapper"><%= f.file_field :file, multiple: true, name: 'uploadedFiles[]', class: 'btn btn-link', width: 100 %></div></script></div>
    <br>

upload.js

$(function() {
    function addNewField() {
        $('#submit_handler').before(tmpl('new-file-input'));
    }

    function deleteButton(element) {
        $(element).after(tmpl('delete-button'));
    }

    addNewField();

    $(document).on('change', '#requesting_file', function() {
        var field = $(this);
        field.removeAttr('id').prop('disabled', true).addClass('added-file');
        deleteButton(field);
        addNewField();
    });

    $(document).on('click', '.delete-file', function() {
        $(this).closest('.file_input_wrapper').remove();
    });

    $('#new_upload').on('submit', function() {
        $('.added-file').prop('disabled', false);
    });
});

Comments

[whats]

это что за куски ?

Answer 2

[whats]

Не забивайте голову тем в чем вы абсолютно не разбираетесь. За вас давно уже все сделано.
malsup.com/jquery/form/#file-upload