Как проверить пустая ли форма и узнать её значение до отправки на обработку?

Question

[Keliorw]

Хочу сделать так что бы когда заливаешь фото в профиль на аватарку она сначала отображалась в предварительном просмотре, сразу же после того как человек выбрал файл для отправки. Написал вот такой код, но он не работает, но я понимаю что и не должен, был бы рад, что бы кто-нибудь помог или объяснил как это сделать

<div id="myModal" class="modal_fon">
                    <div class="modal_content">
                        <div class="modal-top-text">
                            <h1>Загрузить фотокарточку</h1>
                        </div>
                        <div class="modal-description">
                            <?php if ( isset($_FILES['avatar']) ) : ?>
                                <p>Норм чи не?</p>
                            <?php else : ?>
                                <p>Пикай формат JPG или PNG модник</p>
                            <?php endif; ?>
                        </div>
                        <?php echo '<div style="background-image: url(avatars/'.$_SESSION['logged_user']->avatar.')" id="swap-hover"></div>' ?>
                        <form action="" method="POST" enctype="multipart/form-data">
                            <?php if ( isset($_FILES['avatar']) ) : ?>
                                <button type="submit" class="modal_button_send_file">Сохранить и продолжить</button>
                                <button type="button" class="modal_button_close">Отмена</button>
                            <?php else : ?>
                                <input type="file" name="avatar" id="file" class="modal_button_uploads_file" data-multiple-caption="{count} files selected" multiple>
                                <label for="file">Выбрать файл</label>                            
                        </form>
                        <div class="modal-top-text">
                            <h1>Если не грузит пикай файл поменьше петушок</h1>
                        </div>
                            <?php endif; ?>
                    </div>
                </div>

PHP код

if (isset($_FILES['avatar'])){
        $errors = array();
        $file_name = $_FILES['avatar']['name'];
        $file_size = $_FILES['avatar']['size'];
        $file_tmp = $_FILES['avatar']['tmp_name'];
        $file_type = $_FILES['avatar']['type'];

        $expensions = array("image/jpeg","image/jpg","image/png");

        if($file_size > 41943040){
            $errors[] = "Файл слишком большой!";
        }

        for($i=0; $i<count($expensions)-1; $i++){
            if($file_type == $expensions[$i]){
                break;
            } else {
                if($i == count($expensions)-1){
                    $errors[] = "Файл не подходящего типа!";
                }
            }
        }
        
        if(empty($file_name)){
            $errors[] = "Вы не выбрали файл!";
        }

        if (empty($errors) == true){
            move_uploaded_file($file_tmp, "avatars/".$file_name);
            echo '<div style="background-color: #66CC66; color: white; height: 30px; font-family: Montserrat, sans-serif; text-align: center; padding-top: 10px;">Аватарка успешно загружена</div>';
            $user = R::load('account', $_SESSION['logged_user']->id);
            $user->avatar = $file_name;
            $_SESSION['logged_user']->avatar = $file_name;
            R::store($user);
        }else {
            echo '<div style="background-color: #8f0404; color: white; height: 30px; font-family: Montserrat, sans-serif; text-align: center; padding-top: 10px;">'.array_shift($errors).'</div>';
        }
    }

Answer 1

[kocherman]

ducment.querySelector('form').addEventListener('submit',(e)=>{
  /* Здесь можно читать значения элементов форм */

  // с файлами так
  let file = document.forms['formName']['avatar'].files[0];
  //file.name == "photo.png"
  //file.type == "image/png"
  //file.size == 300821
  
  // Если нужно остановить отправку формы, надо выполнить эти две строчки
  e.preventDefault();
  e.stopPropagation();
});

Comments

[Keliorw]

Смотри мне надо сделать так что бы я нажимаю на кнопку загрузить файл, выбираю файл и после этого у меня сразу же проверялось выбрал файл или не выбрал

[kocherman]

Keliorw,

document.querySelector('input[type="file"]').addEventListener('change', (e)=>{
  // Здесь можно проверить
  if (e.target.files.length){
    // Файл выбран
  } else {
    // Файл не выбран (нажат крестик или отмена)
  }
});

[Keliorw]

kocherman, Что делает вот этот метод а точнее почему там именно change?
addEventListener('change' , (e)=>

[kocherman]

Keliorw, change - это название события. addEventListener() - вешает на событие собственный обработчик. e - объект с информацией о событии.

[Keliorw]

kocherman, Может ты знаешь, как можно обратить к определённой форме на странице и вызвать её?

[kocherman]

Keliorw, конечно знаю. За поиск элементов страницы отвечают два метода:
document.querySelector() - для поиска первого элемента.
document.querySelectorAll() - для поиска всех элементов.
Навигация такая же, как в selector-ах CSS. Доступна выборка по тэгу, атрибутам тега, по id тэга и самое распространенное - по классам тега.
Помимо document эти два метода имеет каждый объект элемента для поиска не по всей странице, а среди тэгов внутри элемента.

[Keliorw]

kocherman, а то есть document.querySelector('input[type="file"]') эта часть кода ищет первый элемент input с типом file?

можешь объяснить вот эту часть кода: addEventListener('change', (e)=>

[kocherman]

Keliorw, https://developer.mozilla.org/ru/docs/Web/API/Even...
Отличная статья. посмотри примеры

[Keliorw]

kocherman, я никак не могу найти информацию о том где хранится информация в формы до отправки, могу предположить что в кнопке type="submit" но так же возможно что и в type="file" проверить не знаю как, поэтому если знаешь буду рад если скажешь

[kocherman]

Keliorw, Так какая информация нужна? Ты хочешь прочитать файл без отправки на сервер?

[kocherman]

Keliorw, Вот здесь есть всё про формы с примерами
https://developer.mozilla.org/ru/docs/Learn/HTML/Forms

[Keliorw]

kocherman, просто то что ты скинул, когда использую выдает ошибку, может jquery надо установить или node.js

[Keliorw]

kocherman, было бы вообще круто с тобой связаться в дс если есть желание, поможешь

[kocherman]

Keliorw, если у тебя есть jami, можешь написать мне, в поиске набери bad. Только там отвечаю медленее, это мобильник.