0

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

Код 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;
     });
 
 });
8
  • Опять jQuery, да чё ж такое
    – Doofy
    11 окт 2020 в 5:05
  • @Doofy а что с jQuery? дюже сложен?
    – DiD
    11 окт 2020 в 6:49
  • @DiD не актуален
    – Doofy
    11 окт 2020 в 10:00
  • 1
    @Vovvka Не делайте так var queue = {}; queue[file.name]; for (var id in queue); это очень плохо и часто непредсказуемо. Лучше const queue = new Map(); queue.set(file.name, file); for(const [filename,file] of [...queue]); Не используйте for(...in...) в яваскрипте, он работает не как в php. Как for-in в php работает for(...of...) в яваскрипте.
    – DiD
    12 окт 2020 в 5:04
  • 1
    @Vovvka Ключи из Map извлекать можно просто queue.keys(), значения queue.values(), а пара ключ-значение queue.entries(). Не надо for-in в javascript, он устарел. А в массивах for(const [index,value] of ['a','b','c'].entries()) console.log("[%d] => '%s'",index,value); выведет [0] => 'a' [1] => 'b' [2] => 'c'... Если надо коллекцию привести к массиву, то можно так const $$ = sel => document.querySelectorAll(sel); и тогда $$('a') - это коллекция, а [...$$('a')] - это будет уже массив
    – DiD
    12 окт 2020 в 5:24

1 ответ 1

0

Вот вам рабочий пример: 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 : _;
}
7
  • Большое спасибо за приведенный код, но у меня скрипт который я приводил работает в плане превью, вопрос был в том что в PHP при загрузке на сервер он не выводит массив с фотографиями который были по JS подгружены. Ошибка именно в моем коде я думаю в пару строчек, ее именно я и ищу.
    – Vovvka
    11 окт 2020 в 12:54
  • 1
    @Vovvka вы забыли указать метод, когда отправляете данные $.ajax({ url: ..., method: 'POST', ... , type: 'POST', ... );
    – DiD
    11 окт 2020 в 15:44
  • Спасибо за подсказку, но к сожалению это не сработало. Бьюсь над этим уже второй день, подскажите в чем может быть ошибка?
    – Vovvka
    11 окт 2020 в 19:46
  • 1
    Могу дать несколько дельных советов. Для тестирования сервером может быть, например, хороший сервис httpbin.org - туда направляешь запрос, он в теле ответа присылает всю информацию о запросе. Также там можно тестировать всякие куки, редиректы, задержки, ошибки, запросы картинок и проч. С другой стороны в качестве клиента инструментом тестирования может служить cURL. Именно командная строка, а не пыховый модуль. Открываешь в браузере DevTools, вкладка Сеть Network, выбираешь нужный запрос, на него нажимаешь правой кнопкой мыши, выбираешь Скопировать cURL а вставляешь в терминал.
    – DiD
    11 окт 2020 в 22:14
  • 1
    @Vovvka Два скриншота к предыдущему сообщению imgur.com/a/pGf8FXj Где копировать cURL и где вставить в терминал
    – DiD
    11 окт 2020 в 22:18

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.