1

Есть форма:

<form class="do_post" enctype="multipart/form-data" method="POST" action="add-post.php">
  <div class="add-photo">
    <label>
	<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
	<input class="photo" name="userfile" class="form-control" type="file" >
    </label>
    <input placeholder="Title" name="title" type="text">
    <input placeholder="Quote" name="quote" type="text">
    <button type="submit" name="do_comment">Submit</button>
</form>

Как видно там есть добавления файла(фото) и другие поля. Сейчас все работает так: добавляю фотку, заполняю поля, жму кнопку подтверждения и всё окей. Но я хочу что бы после того как пользователь нажал на кнопку выбора файла, выбрал файл высвечивалась какая-то надпись говорящая что всё окей. Повесить событие изменения поля, а после делать submit с помощью js не вариант, так как нужно что бы другие поля были обязательно заполнены(а если submit до их заполнения уйдут пустыми в бд) или если сделать такой submit с проверкой на заполненность других полей то всегда будет выбиваться ошибка после загрузки фото так как поля не будут заполнены. То есть, нужно сделать так, что бы после выбора фото юзером, ему выводилось сообщение что всё окей без submit-a формы до заполнения всех остальных полей. Подскажите пожалуйста, как это реализовать?

Вот php:

if (isset($_FILES['userfile'])) {
  $uploaddir = 'images/blog/';
  $uploadfile = $uploaddir.basename($_FILES['userfile']['name']);

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { 
  ?>
      <h5 > Photo '<?php echo $_FILES['userfile ']['name ']?>'is loaded succesfuly </h5><br>
  <?php
} else {
    ?> 
        <span> Error </span>
    <?php
         }
     }
?>
5
  • Можно сделать невидимую загрузку еще до того как юзер дозаполнит остальные поля
    – stckvrw
    27 мар 2018 в 20:58
  • @stckvrw а как это реализовать?
    – Tick-Tack
    28 мар 2018 в 13:25
  • А что входит в понятие "надпись говорящая что всё окей"? Что файл является картинкой, размеры меньше 30 КБ [к стати, вы уверены что максимум только 30 КБ?] и/или еще что то?
    – stckvrw
    28 мар 2018 в 17:59
  • @stckvrw все окей если файл это картинка, а вес не превышает максимальный( там 3 мб должно быть, это чисто для примера). Ну и все это что бы выводилось до отправки формы
    – Tick-Tack
    28 мар 2018 в 18:05
  • Хотя вообще то @Роман наверное предложил еще лучший способ
    – stckvrw
    28 мар 2018 в 19:05

1 ответ 1

2
+25

Для начала: данный способ не особенно подходит, учитывая то, что у вас данные должны отправляться разными запросами, и вам придется реализовывать отдельно загрузку файла и отдельно - отправку остальной формы, благо для этого в давно существует удобное API FormData.

Для начала, поймайте событие выбора файла:

<form id="form" class="do_post" enctype="multipart/form-data" method="POST" action="add-post.php">
  <div class="add-photo">
    <label>
    <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
    <input id="file" class="photo" name="userfile" class="form-control" type="file" />
    </label>
    <input placeholder="Title" name="title" type="text">
    <input placeholder="Quote" name="quote" type="text">
    <button id="submit-btn" type="submit" name="do_comment">Submit</button>
</form>

JS-код

var formElement = document.getElementById('form');
var submitButton = document.getElementById('submit-btn'); 
var fileInput = document.getElementById('file');
function sendFormFields() {
    // получаем данные из формы
    var formData = new FormData(formElement);
    // отправляем остальные данные...
}

function loadFile(formData) {
    // отправка POST-запроса с FormData либо
    // через XMLHttpRequest, либо через API,
    // его поддерживающий (а это и jQuery, и Angular и т. п.),
    // и каждый из них поддерживает отслеживание прогресса
    // из ответа можно взять ID файла на сервере и добавить
    // его в форму, чтобы соотнести данные с файлом
}

fileInput.onchange = function() {
    var selectedFile = fileInput.files[0];
    var formData = new FormData();

    formData.append('file', selectedFile, 'filename.extension');

    // отключаем кнопку отправки формы
    submitButton.setAttribute('disabled', 'disabled');

    loadFile(formData).then(function () {
        // включаем кнопку отправки формы
        submitButton.removeAttribute('disabled');
        // исключаем данные фала из отправки формы
        selectedFile.setAttribute('disabled', 'disabled');
    });
};

form.addEventListener("submit", function (event) {
    event.preventDefault();

    sendFormFields();
});

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

В сухом остатке: без JS вам не обойтись, и для отправки данных как минимум файла настоятельно рекомендую использовать API FormData.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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