Как использовать jQuery FIle Upload во вложенной форме - PullRequest
7 голосов
/ 04 января 2012

Я пытаюсь использовать https://github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V5 в моем новом проекте rails. Я хочу сделать объекты с именем assignments, к которым прикреплено несколько файлов.

Как мне создать форму для назначения, в которой есть форма для вложенных файлов?

Ответы [ 2 ]

2 голосов
/ 10 мая 2013

Я сделал это, добавив отдельную форму вне моей основной формы только для загрузки файлов:

= s3_uploader_form post: void_url, as: "photo_url", id: "photo_upload" do
  = file_field_tag "file", multiple: true

= form_for @model do |f|
  ...
  = f.fields_for :children do |child_fields|
    = file_field_tag :"#{child_id}_file", multiple: true

Затем я подключаю часть плагина fileupload к обеим формам, например так:

$("#photo_upload").fileupload
  add: (e, data) ->
    data.submit()

  done: (e, data) ->
    file = data.files[0]

// For each child
$("##{child_id}_file").fileupload
  dropzone: $("##{child_id}_dropzone")
  add: (e, data) ->
    # Upload the file using the external upload form with the proper form action and fields
    $rootPhotoUploadForm.fileupload('add', { files: [file], child_id: child_id })

По сути, я использую API jQuery-File-Upload для загрузки файла из внешней формы загрузки.

Обратите внимание, что при запуске я включаю child_id«добавить» во внешней форме загрузки, чтобы я знал, какой ребенок вызвал загрузку файла.Это значение доступно в переменной data в каждом обратном вызове.

Я много раз абстрагировал, так как есть много специфичного для приложения кода, надеюсь, вы сможете понять его оттуда.

2 голосов
/ 31 мая 2012

Этот плагин изменяет форму ввода [type = file] и, когда он находится внутри другой формы, он недействителен. Я решил это: внешнюю форму я изменил на <div id="form">. Я отправляю форму через jQuery с

$.post(url, $('#form *').serialize(), function(response){...}, 'json')

Конечно, вы должны как-то управлять загрузкой на стороне сервера перед отправкой формы.

...