Помогите соединить правильно код формы Java Script PHP

Question

Сижу уже час, не могу понять где ошибка.

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

<form name="Download" id="Download"  method="post" action="S.php" enctype="multipart/form-data">

    <input type="number" name="run" value="run">

  
     <input type="file" name="img[]"  id="addImages" multiple="">


    <input type="hidden" name="zaza" value="azaza">
 
    <ul id="uploadImagesList">
        <li class="item template">
            <span class="img-wrap">
                <img src="image.jpg" alt="">
            </span>
            <span class="delete-link" title="Удалить">Удалить</span>
        </li>
    </ul>
 
    <div class="clear"></div>
 
 


    <input type="submit" name="submit" value="Загрузить">



</form>

Код предварительного превью и удаления фото до загрузки на сервер.

jQuery(document).ready(function ($) {
 
     var maxFileSize = 20 * 1024 * 1024; // (байт) Максимальный размер файла (20мб)
     var queue = {};
     var form = $('form#uploadImages');
     var imagesList = $('#uploadImagesList');
 
     var itemPreviewTemplate = imagesList.find('.item.template').clone();
     itemPreviewTemplate.removeClass('template');
     imagesList.find('.item.template').remove();
 
 
     $('#addImages').on('change', function () {
         var files = this.files;
 
         for (var i = 0; i < files.length; i++) {
             var file = files[i];
 
             if ( !file.type.match(/image\/(jpeg|jpg|png|gif)/) ) {
                 alert( 'Фотография должна быть в формате jpg, png или gif' );
                 continue;
             }
 
             if ( file.size > maxFileSize ) {
                 alert( 'Размер фотографии не должен превышать 20 Мб' );
                 continue;
             }
 
             preview(files[i]);
         }
 
         this.value = '';
     });
 
     // Создание превью
     function preview(file) {
         var reader = new FileReader();
         reader.addEventListener('load', function(event) {
             var img = document.createElement('img');
 
             var itemPreview = itemPreviewTemplate.clone();
 
             itemPreview.find('.img-wrap img').attr('src', event.target.result);
             itemPreview.data('id', file.name);
 
             imagesList.append(itemPreview);
 
             queue[file.name] = file;
 
         });
         reader.readAsDataURL(file);
     }
 
     // Удаление фотографий
     imagesList.on('click', '.delete-link', function () {
         var item = $(this).closest('.item'),
             id = item.data('id');
 
         delete queue[id];
 
         item.remove();
     });
 
 
     // Отправка формы
     form.on('submit', function(event) {
 
         var formData = new FormData(this);
 
         for (var id in queue) {
             formData.append('images[]', queue[id]);
         }
 
         $.ajax({
             url: $(this).attr('action'),
             type: 'POST',
             data: formData,
             async: true,
             success: function (res) {
                 alert(res)
             },
             cache: false,
             contentType: false,
             processData: false
         });
 
         return false;
     });
 
 });

Answer 1

Вот вам рабочий пример: https://jsfiddle.net/msran6yp/

window.addEventListener('DOMContentLoaded', function re_wafer() {
  // Убираем старые подложки
  $$('.input-file-wafer').forEach(wafer => wafer.remove());

  // На каждый файловое поля ввода
  $$('input[type="file"]').forEach(input => {

    // Создаем новую подложку
    const wafer = __({n: 'div', c: 'wafer', b: input });

    // Отслеживаем событие изменений поля
    input.addEventListener('change', readInput);

    // Читаем значения поля
    readInput();

    // Отслеживаем событие прокручивания колёсика
    input.addEventListener('wheel', e => {
      // Прокручиваем подложку как поле
      wafer.scrollTop += event.deltaY;
      console.log(e);
    }, {
      passive: true
    });

    // Читает значение поля
    function readInput() {
      console.log('read');
      // Отчищаем подложку от старых превьюшек
      [...wafer.childNodes].forEach(node => wafer.removeChild(node));
      // На каждый файл значения поля создаем по читателю 
      if (![...input.files].map(file => {
          // Читатель
          const reader = new FileReader();
          // Слушаем событие загрузки
          reader.addEventListener('load', () => {
            // Создаем элементы
            __({n: 'div', c: 'item', l: wafer,
                w: [{n: 'img', a: { src: reader.result }},
                    {n: 'span', h: file.name }]
            });
          });
          // Читаем файл
          reader.readAsDataURL(file);
        }).length) {
        // Создаём placeholder над подложкой
        __({n: 'div',c: 'no-items',l: wafer,h: 'Перетащи файлы сюда'});
      }
    }

  });

});

Только на jQuery сами переделаете. Пример упрощён сильнее некуда.

Код этих функций можно сильно не комментировать.

// Простой алиас querySelector
function $(...q){
  return q.reduce((r,s)=>!r?null:'object'==typeof s?s:r.querySelector(s),document);
}

// Простой алиас querySelectorAll
function $$(...q){
  return q.reduce((r,s,i,q)=>!r?null:'object'==typeof s?s:r['querySelector'+(i==q.length-1?'All':'')](s),document);
}

// Создаёт элементы
// Свойства принимаемого аргумента:
//   .n: tag Name,
//   .x: Xml namespace,
//   .i: element Id,
//   .c: element Class name,
//   .a: element Attributes,
//   .d: Data attributes,
//   .p: element Properties,
//   .k: element Keys,
//   .s: element Style,
//   .h: inner Html,
//   .f: insert First into,
//   .l: insert Last into,
//   .b: insert Before,
//   .r: Replace with,
//   .w: Within objects /* рекурсивно вложенные объекты */,
//   .z: Zip /* выпрямить массив объектов */
function __ (d) {
  const c = (t,n) => document[`createElement${n?'NS':''}`](...(n?[n,t]:[t])),
        o = (v,c) => Array.isArray(v)?v.forEach(c):c(v),
        r = (k) => k.replace(/-(\w)/g,(m)=>m[1].toUpperCase()),
        e = (c,f) => Object.keys(c).forEach(f);
  if("string"==typeof d)return c(d);
  if(Array.isArray(d))return d.map(__);
  if(d instanceof Element)return d;

  const _=c(d.n,d.x);  
  const z = [_];
  
  if(d.i)_.setAttribute('id',d.i);
  if(d.c)o(d.c,c=>_.classList.add(c));
  if(d.a)e(d.a,a=>_.setAttribute(a,d.a[a]));
  if(d.d)e(d.d,d=>_.setAttribute('data-'+d,d.d[d]));
  if(d.e)e(d.e,e=>_.addEventListener(e,d.e[e]));
  if(d.p||d.k)Object.assign(_,d.p,d.k);
  if(d.k)e(d.k,k=>_[k]=d.k[k]);
  if(d.s)e(d.s,s=>_.style[r(s)]=d.s[s]);
  if(d.h)_.innerHTML=d.h;
  if(d.f)$(d.f).insertBefore(_,$(d.f).firstChild);
  if(d.l)$(d.l).appendChild(_);
  if(d.b)$(d.b).parentNode.insertBefore(_,$(d.b));
  if(d.r)$(d.r).replaceWith(_);
  if(d.w)o(__(d.w),e=>(z.push(e),_.appendChild(e)));
  return d.z ? z : _;
}

БЛОГ НА HUSL

Помогите соединить правильно код формы Java Script PHP

Ответы (1 шт):