@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>';
        }
    }
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 1
kocherman
@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();
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 сент. 2020, в 12:04
1000 руб./в час
19 сент. 2020, в 11:59
20000 руб./за проект
19 сент. 2020, в 11:26
17500 руб./за проект