0

Второй день мучений, подскажите кто может в чем ошибка.

Есть превью для загружаемых фотографий, не могу понять почему он выдает ошибку error ->4 в массиве с фото.

Остальную информацию с формы загружает, фотографии нет.

<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;
     });
 
 });


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

JS код взят отсюда: https://codd-wd.ru/sozdanie-prevyu-izobrazhenij-s-pomoshhyu-html5-file-api-i-jquery

1 ответ 1

0

Так происходит из-за того что id вашей формы - Download, а но при этом селектор ищет форму с id="uploadImages".


var maxFileSize = 20 * 1024 * 1024; // (байт) Максимальный размер файла (20мб)
var queue = {};
var form = $('form#uploadImages');
//            ^^^^^^^^^^^^^^^^^
//  Нужно заменить на form#Download
var imagesList = $('#uploadImagesList');

Как следствие не вешается обработчик на событие отправки формы form.on('submit', function(){}); и происходитпросто отправка, а т.к. после добавления превью input обнуляется this.value = '';, то в форме отсутствуют файлы

8
  • В очередной раз благодарю за подсказку, но к сожалению этот способ я уже пробовал и он не работает, при нажатии на кнопку submit выводится окно в браузере с частью кода страницы((
    – Vovvka
    Commented 11 окт. 2020 в 23:02
  • Так а что можно ожидать от success: function (res) {alert(res)},? Как бы, у вас указано что при успешной отправке, нужно вывести alert с содержимым ответа. Т.е. если S.php будет возвращать например имена загруженных файлов, то вы их увидете в alert
    – Ein
    Commented 11 окт. 2020 в 23:08
  • Так мне все что нужно чтобы вместе со скриптом массив данных и фотографии отправились, выводить их не нужно в alert'е совершенно. Помогите пожалуйста, для меня пока-что JS как арабский язык когда я на него смотрю.
    – Vovvka
    Commented 11 окт. 2020 в 23:10
  • Ну так данные формы и фото отправляются, если указать правильный id. Просто сейчас суть кода в том, что делается перехват отправки формы и выполняется ajax запрос с файлами и всем остальным, а по завершении запроса в alert выводится ответ сервера. Т.е. после того как запрос завершился вызывается функция указанная в success и сейчас это просто alert
    – Ein
    Commented 11 окт. 2020 в 23:57
  • так я указал как вы и подсказали правильный id var form = $('form#Download'); и она и открывает alert и не сохраняет фото при этом загруженные и в принципе не выводит ничего...
    – Vovvka
    Commented 12 окт. 2020 в 0:22

Ваш ответ

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

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