Загрузка файла с помощью базовой линии

Я использую Backbone.js в приложении Rails, и мне нужно делать загрузки файлов как часть одной из моделей Backbone.

Я не считаю, что Backbone позволяет загружать многокомпонентные файлы из коробки. Кто-нибудь смог заставить его работать через какой-либо плагин или с другой внешней библиотекой? Как я могу продлить Backbone.js для поддержки этого?

  • Ruby on Rails 4: Как включить файлы Javascript в веб-приложение Rails?
  • Используйте тот же div для переключения различных частей страницы
  • Rails 5: как использовать $ (document) .ready () с турбо-ссылками
  • Загрузить файл из Google Picker API в рельсах
  • Рендеринг JS.ERB приводит к необработанному коду
  • Угловое JS на Rails - Аргумент «RaffleCtrl» не является функцией, получил неопределенный
  • Предупреждение. Вызов метода document.write () из асинхронно загруженного внешнего скрипта был проигнорирован. Как это фиксируется?
  • Библиотека JavaScript загружается дважды в Rails
  • 5 Solutions collect form web for “Загрузка файла с помощью базовой линии”

    Отвечая на мой собственный вопрос после нескольких месяцев судебного разбирательства, используя разные методы. Мое решение следующее (с Rails).

    Для любой формы, требующей загрузки файлов, я бы установил data-remote="true" и enctype="multipart/form-data" и включил rails.js и jquery.iframe-transport.js .

    Настройка data-remote="true" с помощью rails.js позволяет мне привязываться к ajax:success и создавать модель Backbone.js при успешном завершении.

    HTML:

     <form action="/posts.js" method="post" data-remote="true" enctype="multipart/form-data"> <input type="text" name="post[message]" /> <input type="file" name="post[file]" /> <button>Submit</button> </form> 

    JavaScript:

    Очевидно, вы должны привязать ajax:error для обработки ошибок.

    Для меня данные дезинфицируются в модели ActiveRecord , поэтому не нужно слишком беспокоиться об утверждении eval .

     $('form').bind('ajax:success', function(event, data) { new Model(eval(data)); // Your newly created Backbone.js model }); 

    Контроллер Rails:

     class PostsController < ApplicationController respond_to :js def create @post = Post.create(params[:post]) respond_with @post end end 

    Rails View (create.js.haml):

    Использование драгоценного камня remotipart .

    Это будет обрабатывать случай, когда форма загружает файлы с установленным enctype , а когда нет.

    Вы можете выбрать, чтобы вызвать sanitize на ваш ответ здесь.

     = remotipart_response do - if remotipart_submitted? = "eval(#{Yajl::Encoder.encode(@post)});" - else =raw "eval(#{Yajl::Encoder.encode(@post)});" 

    Вы можете проверить плагин jquery.iframe.transport . Если вы используете рельсы 3, вместо этого вы можете использовать remotipart (он связывает плагин iframe.transport), который перехватывает драйвер ujs ​​рельсов, чтобы автоматически добавлять поддержку для загрузки файлов в запросы ajax.

    Я думаю, вы неправильно понимаете, как работает позвоночник. Backbone – это библиотека MVC для javascript, а не веб-сервер. Загрузка файлов согласовывается между браузером клиентов и вашим сервером. Магистраль – это лишь средний слой, который помогает вам легко и удобно организовывать и представлять данные.

    При этом вам нужно связать файл с вашей моделью: 1) обработать загрузку с помощью рельсов, а затем 2) сохранить имя и местоположение файла в строке в вашей модели.

    Итак, вот часть загрузки файла:

    http://khamsouk.souvanlasy.com/articles/ajax-file-uploads-in-rails-using-attachment_fu-and-responds_to_parent

    После того как вы вернете объект list_item, вы просто создадите новое поле в своей модели и сохраните asset_path(list_item) и asset_path(list_item) .

    Надеюсь, это поможет.

    Если вы не возражаете отказаться от обратной совместимости, вы можете воспользоваться преимуществами XHR2 и FormData

    Это просто:

     var data = new FormData( $('form.someForm').get(0) ); $.ajax('http://*****.com', { type:'POST', data: data, processData: false, contentType: false // it automaticly sets multipart/form-data; boundary=... }); 

    Воскрешая это.

    Как упоминалось в предыдущих ответах, запрос multipart / form-data может быть выполнен через jQuery.ajax :

     var formData = new FormData(); var input = document.getElementById('file'); formData.append('file', input.files[0]); $.ajax({ url: 'path/to/upload/endpoint' type:'POST', data: formData, processData: false, contentType: false }); 

    Также важно отметить, что из-за коробки Backbone.sync будет объединять любые параметры с помощью model.save(null, { /* options here */ }) с инструкциями $.ajax .

    Ваша процедура сохранения будет выглядеть примерно так:

     var model = new Model({ key: 'value' }); var input = document.getElementById('file'); var formData = new FormData(); _.each(model.keys(), function (key) { // Append your attributes formData.append(key, model.get(key)); }); formData.append('file', input.files[0]); // Append your file model.save(null, { data: formData, processData: false, contentType: false }); 
    JavaScript делает сайт умным, красочным и простым использованием.