0

Есть код, делающий превью и возможность удаления загруженных фотографий пользователями перед отправкой на сервер. В 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();  
}


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

4
  • @DrMcSheen Буду очень благодарен коду, так не пойму, мешанина в голове сразу 2 новых языка изучаю одновременно.
    – Vovvka
    Commented 4 окт. 2020 в 21:38
  • @DrMcSheen К сожалению это не сработало, фраза .name даже подчеркнула среда разработки.
    – Vovvka
    Commented 4 окт. 2020 в 22:05
  • 1
    Вот тут хороший пример с кодом xozblog.ru/2012/10/html5-uploader
    – DrMcSheen
    Commented 4 окт. 2020 в 22:07
  • @DrMcSheen спасибо, буду разбираться..
    – Vovvka
    Commented 4 окт. 2020 в 22:10

1 ответ 1

1

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

  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 или же настройках Вашего веб-сервера)

1
  • Спасибо!! Все заработало!
    – Vovvka
    Commented 5 окт. 2020 в 18:11

Ваш ответ

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

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