Распарсивание мультифайлового ипута
Задача:
Есть мультифайловый инпут, после выбора изображений в диалоговом окне этот инпут ремовится, вместо него появляется 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. Но мои попытки сгенерировать инпуты, которые бы содержали ссылки на каждый выбранный файл, окончились плачевно. |
Пока что нашел только одно решение.
Делаю по добавлению файлов обычные хидден инпуты с файлнеймами, а потом уже после парсинга параметров формы сверяю файлнеймы в инпутах с массивом в мультизагрузчике. И если они совпадают, то подставляю файл. |
Цитата:
2. Есть куча плагинов позволяющих перетаскивать файлы Drag and drop, с сохранением имени... 3. Сделать набор файловых сингло инпутов, с z-index:-1;position:relative;(кроме первого), по событию onchange, скрывать текущий (z-index:-1);, и открывать следущий z-index:0 |
Цитата:
Разные инпуты нужны потому что кроме самих файлов для каждой модели изображения отправляется еще ряд параметров. 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, время: 04:06. |