Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Распарсивание мультифайлового ипута (https://javascript.ru/forum/jquery/39418-rasparsivanie-multifajjlovogo-iputa.html)

doniv 29.06.2013 08:22

Распарсивание мультифайлового ипута
 
Задача:
Есть мультифайловый инпут, после выбора изображений в диалоговом окне этот инпут ремовится, вместо него появляется n-ное количество синглфайловых инпутов.

Кофискрипт:
$(document).on 'change', '.jsPublicationImagesMultiupload', ->
    images = $(@).get(0).files
    for i in [0..images.length-1]
      createImageBlocks(images[i])

  createImageBlocks = (image) ->
    $('#addPublicationImage').click()
    block = $('.jsPublicationImages').find('.fields').last()
    inputOld = block.find('.jsImageInput')
    inputNew = $('<input>').attr({
        type: 'hidden',
        id: inputOld.attr('id'),
        name: inputOld.attr('name')
        # ???
      })
    inputNew.appendTo(block);
    inputNew.appendTo(block);
    inputOld.remove()
    getPreview(block.find('.jsPublicationImage'), image)

Сам инпут получается распарсить на изображения и даже сделать из них превьюхи через FileReader. Но мои попытки сгенерировать инпуты, которые бы содержали ссылки на каждый выбранный файл, окончились плачевно.

doniv 29.06.2013 12:06

Пока что нашел только одно решение.
Делаю по добавлению файлов обычные хидден инпуты с файлнеймами, а потом уже после парсинга параметров формы сверяю файлнеймы в инпутах с массивом в мультизагрузчике. И если они совпадают, то подставляю файл.

Deff 29.06.2013 17:50

Цитата:

Сообщение от doniv
Но мои попытки сгенерировать инпуты, которые бы содержали ссылки на каждый выбранный файл, окончились плачевно.

Не интересный вопрос, посколь не описано - зачем нужны имена файлов отдельно ?
2. Есть куча плагинов позволяющих перетаскивать файлы Drag and drop, с сохранением имени...
3. Сделать набор файловых сингло инпутов, с z-index:-1;position:relative;(кроме первого), по событию onchange, скрывать текущий (z-index:-1);, и открывать следущий z-index:0

doniv 29.06.2013 19:28

Цитата:

Сообщение от Deff (Сообщение 259183)
Не интересный вопрос...

Нужны не имена файлов отельно, а инпуты содержащие файлы. Но такого добится джаваскриптом не получается, потому что это дыры для атаки.
Разные инпуты нужны потому что кроме самих файлов для каждой модели изображения отправляется еще ряд параметров.
2. Про перетаскиевание вообще речи не было.
3. Это процесс последовательной, а не мультизагрузки.

-----
По сабж:
Распарсивание в контроллере оказалось самым удобным вариантом.

Сначала создаем фейковые поля с нужными name и value для последующего заполнения файлами в контроллере:
$(document).on 'change', '.jsPublicationImagesMultiupload', ->
  #...
  images = $(@).get(0).files
  for i in [0..images.length-1]
    createImageBlocks(images[i])

#...
createImageBlocks = (image) ->
  #...
  inputNew = $('<input>').attr({
    type: 'hidden',
    name: inputOld.attr('name') # берем правильный адрес отправки параметра из сгенерированого заранее инпута.
    value: image.name + image.type
  })
  #...
#...

Тем временем в контроллере:
# Обновляем параметры перед отправкой в логику
params[:event][:publication_images_attributes].to_a.each do attr_publication|
  params[:images].to_a.each do |image|
    attr_publication[1][:image] = image if attr_publication[1][:image].to_s == (image.original_filename.to_s + image.content_type.to_s)
  end
end

# В добрый путь
@event = Event.new(params[:event])


Часовой пояс GMT +3, время: 00:30.