A
A
Anton2021-08-09 08:13:26
AJAX
Anton, 2021-08-09 08:13:26

How to clear the file selection in the button in the form (ajax) after submitting the data?

Hi all.

I know how to clean up the usual imput fields, I know this, I use the document.getElementById('formtexosmotr').reset() method
But what about uploading files, I select a file and I have an inscription, a photo is selected: 1.
After sending, I want this inscription throw off, how to implement?

Photo selection button

<div class="input__wrapper">
<input type="file" name="file2" id="file2" class="input input__file">
<label for="file2" class="input__file-button">
<span class="input__file-icon-wrapper"><img class="input__file-icon" src="/media/img/add.svg" alt="Выбрать фото" width="25"></span>
<span class="input__file-button-text">Выберите <br />фото</span>
</label>
</div>


Script for a button that will count how many selected photos
<script>
   //показывает сколько фоток выбрано в кнопке
   let inputs = document.querySelectorAll('.input__file');
   Array.prototype.forEach.call(inputs, function(input) {
     let label = input.nextElementSibling,
       labelVal = label.querySelector('.input__file-button-text').innerText;

     input.addEventListener('change', function(e) {
       let countFiles = '';
       if (this.files && this.files.length >= 1)
         countFiles = this.files.length;

       if (countFiles)
         label.querySelector('.input__file-button-text').innerText = 'Выбрано фото: ' + countFiles;
       else
         label.querySelector('.input__file-button-text').innerText = labelVal;
     });
   });
 </script>


Validashka
if (!errors) {
         var data = $('#formtexosmotr').serialize();

         var data = new FormData(this); //для передачи файлов

         $.ajax({
           url: 'pay.php',
           type: 'POST',
           processData: false, //для передачи файлов
           contentType: false, //для передачи файлов
           data: data,
           success: function(res) {
             if (res == 1) {
               alert('Письмо отправлено, в ближайшее время Вам перезвонит менеджер.');
               document.getElementById('formtexosmotr').reset() //отчистка полей в форме после отправки
               $('#ajax-loader').hide(); //скрыть лоайдер
             } else {
               alert('Ошибка отправки, попробуйте повторить отправку позднее.');
             }
           },
           error: function() {
             alert('Ошибка!');
           }
         });
         $('#ajax-loader').show(); //показывать лоадер пока идет процесс отправки
       }

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Anton, 2021-08-10
Websaytovsky @ws17

Decision:

document.querySelector('.input__file-button-text').innerText = 'Выберите фото';

A
Aricus, 2021-08-09
@Aricus

$('#file2').val('');

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question