За последние 24 часа нас посетили 20100 программистов и 1566 роботов. Сейчас ищут 1942 программиста ...

динамические input:file и $_FILES

Тема в разделе "JavaScript и AJAX", создана пользователем TigerZaka, 13 мар 2015.

  1. TigerZaka

    TigerZaka Активный пользователь

    С нами с:
    16 сен 2011
    Сообщения:
    189
    Симпатии:
    1
    Всем привет!

    Пытаюсь сделать загрузку изображений с preview'шками. Превьюшки есть, а $_FILES при отправке формы пустой.
    Вот так создаю форму с input:file
    Код (Text):
    1.  
    2. $('.addBlock').empty().append(
    3.                         $('<form/>').attr({
    4.                             'name': 'addressInfoForm',
    5.                             'method': 'post',
    6.                             'enctype': 'multipart/form-data'
    7.                         }).append(
    8.                              $('<div/>').addClass('row-fluid imagesUpload').append(
    9.                                                 $('<label/>').append('Загрузить изображения'),
    10.                                                 $('<input/>').attr({
    11.                                                     'type': 'file',
    12.                                                     'class': 'files',
    13.                                                     'name': 'addressPhoto',
    14.                                                     'multiple': 'multiple',
    15.                                                     'accept': 'image/*'
    16.                                                 })
    17.                                         ),
    18.                                         $('<div/>').addClass('row-fluid').append(
    19.                                                 $('<output/>').attr('id', 'list').addClass('row')
    20.                                         )
    21.  
    22. );
    Так получаю превью
    Код (Text):
    1.  
    2. $('input[name="addressPhoto"]').on('change', function(evt) {
    3.                         var files = evt.target.files; // FileList object
    4.                         console.log(files)
    5.                         // Loop through the FileList and render image files as thumbnails.
    6.                         for (var i = 0, f; f = files[i]; i++) {
    7.  
    8.                             // Only process image files.
    9.                             if (!f.type.match('image.*')) {
    10.                                 continue;
    11.                             }
    12.                             var reader = new FileReader();
    13.  
    14.                             // Closure to capture the file information.
    15.                             reader.onload = (function (theFile) {
    16.                                 return function (e) {
    17.                                     console.log(e.target.result);
    18.                                     $("#list").append(
    19.                                             $('<div/>').attr({
    20.                                                 'class': 'row-fluid photoBlock'
    21.                                             }).append(
    22.                                                             $('<div/>').attr({
    23.                                                                 'class': 'col-lg-3'
    24.                                                             }).append(
    25.                                                                             $('<img/>').css('max-width', '250px').attr({
    26.                                                                                 'name': 'photos[' + theFile.name + '][thumbnail]', 'src': e.target.result, 'title': escape(theFile.name)
    27.                                                                             }).append(escape(theFile.name))
    28.                                                                     ),
    29.                                                             $('<div/>').attr({
    30.                                                                 'class': 'col-lg-1'
    31.                                                             })
    32.                                                     )
    33.                                     )
    34.                                 };
    35.                             })(f);
    36.                             // Read in the image file as a data URL.
    37.                             reader.readAsDataURL(f);
    38.                         }
    39.                     });
    если нажимаем на отправку формы
    Код (Text):
    1.  
    2.                 $('[name="addressInfoForm"]').on('submit', function(e) {
    3.                     e.preventDefault();
    4.                     $.ajax({
    5.                         method: 'post',
    6.                         url: '/saveaddress',
    7.                         data: $('[name="addressInfoForm"]').serialize(),
    8.                         success: function(data) {
    9.                             console.log(JSON.parse(data))
    10.                         }
    11.                     });
    12.                 });
    Подскажите или киньте ссылочку, как получить массив $_FILES
     
  2. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    что за адрес?
     
  3. TigerZaka

    TigerZaka Активный пользователь

    С нами с:
    16 сен 2011
    Сообщения:
    189
    Симпатии:
    1
    Адрес здания, не знаю зачем упомянул.
    Исправил стартовое сообщение
     
  4. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    глубоко не вникал но логика примерно такая. из формы читаются файлы, их содержимое помещается в строки, эти строки помещаются в жсон, жсон отправляется серверу. на сервере надо принять этот жсон, декодировать, вытащить строки содержимого файлов, заправить эти строки в физические файлы на сервере. суперглобальный массив _FILES в данном случае вообще не используется ибо как такового мультипарт/форм не приходит потому что не используется обычный пост-запрос а используется аякс.
     
  5. TigerZaka

    TigerZaka Активный пользователь

    С нами с:
    16 сен 2011
    Сообщения:
    189
    Симпатии:
    1
    Спасибо за инфу