Вывод сообщения загружен ли файл на сервер без нажатия на кнопку подтверждения формы

Максим Буяков

Есть форма:

<form class="do_post" enctype="multipart/form-data" method="POST" action="add-post.php">
  <div class="add-photo">
    <label>
	
	
    </label>
    
    
    <button type="submit" name="do_comment">Submit</button>
</div></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>
  <!--?php
} else {
    ?--> 
        <span> Error </span>
    <!--?php
         }
     }
?-->
1 ответ

Максим Буяков

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

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

<form id="form" class="do_post" enctype="multipart/form-data" method="POST" action="add-post.php">
  <div class="add-photo">
    <label>
    
    
    </label>
    
    
    <button id="submit-btn" type="submit" name="do_comment">Submit</button>

</div></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.

licensed under cc by-sa 3.0 with attribution.