TransWikia.com

JavaScript не могу поймать названия превью фотографий в PHP

Stack Overflow на русском Asked by Vovvka on January 30, 2021

Есть код, делающий превью и возможность удаления загруженных фотографий пользователями перед отправкой на сервер. В JS не разбираюсь, взял готовый пример вот отсюда: https://codd-wd.ru/sozdanie-prevyu-izobrazhenij-s-pomoshhyu-html5-file-api-i-jquery/

Вопрос 1. Не могу правильно соединить получаемые данные чтобы в одной форме вместе с текстом отправлялись названия фото в массиве. Текст из формы отправляется где login и description, а вот название фотографий загруженных нет, массив с фото приходит пустой.

Вопрос 2. Как корректно изменить названия всех загруженных фотографий на уникальные, чтобы на сервере не было повторов фото? Это же делается через цикл, я правильно понимаю??

HTML форма.

<form action="/S.php" method="POST">
    <strong>Ваш логин</strong>
       <input type="text" name="login" value="<?php echo @$data['login']; ?>"><br>
        <input type="text" name="description" value="<?php echo @$data['description']; ?>"><br>

                                 
                
    <input type="file" id="addImages" multiple="">
 
    <input type="hidden" name="azaza" value="zazaza">
 
    <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>
 
    <div>
        <input type="submit" value="Отправить">
    </div>

JS код.

<script>
 jQuery(document).ready(function ($) {
 
     var maxFileSize = 2 * 1024 * 1024; // (байт) Максимальный размер файла (2мб)
     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( 'Размер фотографии не должен превышать 2 Мб' );
                 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;
     });
 
 });
 
</script>

В PHP ловлю отправленные данные через print_r()

$data = $_POST;
$photo = $_FILE;


//Выводим

if (isset($data['submit']) )            { 
 
  
  
   echo'<pre>';
     print_r($photo);
   echo'</pre>';

  
     echo'<pre>';
     print_r($data);
   echo'</pre>';
}
else {
  exit();  
}


Не могу соединить все воедино, какая-то каша, помогите, коллеги.

One Answer

Для того что бы этот код у Вас работал, нужно:

  1. добавить в форме enctype="multipart/form-data" и id="uploadImages"
  2. исправить на сервере значение переменной с массивом файлов и условие проверки:

2.1) $photo = $_FILE; заменить на $photo = $_FILES;

2.2) if (isset($data['submit']) ) { также заменить на что-то такое if (sizeof($photo)) {

И наконец Вы увидите массивы заполненными в alert, согласно кода Вашего js (главное не превысить максимальный размер загружаемых на сервер файлов, директивы upload_max_filesize и post_max_size в php.ini или же настройках Вашего веб-сервера)

Answered by noname2019 on January 30, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP