Как загрузить файл javascript на сервер

Подробно о загрузке файлов в javascript

1. Как загружать файлы с помощью javascript - форма
2. Скрипт javascript для загрузки файлов
3. Обработчик javascript-post для загрузки файлов
4. Скачать

Как загружать файлы с помощью javascript - форма

Как вы наверное знаете... javascript самостоятельно не умеет загружать файлы на сервер! Для этого ему нужен php.

Вчера буквально написал страницу о функции, которая и поможет нам в загрузке файлов с помощью "javascript"

Но давайте все по порядку!

Что вообще требуется ..

Для загрузки файлов на с помощью javascript

Первое что нам потребуется это форма для загрузки файла.

Второе... нам потребуется знание javascript post, чтобы отправить post запрос и получить ответ.

И + php функция move_uploaded_file - которая умеет загружать файл на сервер!

Требуемые знания мы перечислили... перейдем к форме:

Форма для загрузки файлов с помощью javascript

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

input с типом file

+ Селектор id - далее он нам понадобится...

<input type="file" id="file">

Любой элемент Dom с возможностью отследить нажатие(onclick) - для отправки post запроса... В приведенном примере onclick - поставим прямо внутрь кнопки button

<button onclick="post();">Кнопка для загрузки файлов javascript</button>

Соберем форму для загрузки файла с помощью javascript

<input type="file" id="file">

<button onclick="post();">Кнопка для загрузки файлов javascript</button>




Скрипт javascript для загрузки файлов

Краткое описание "Скрипта javascript для загрузки файлов"

4 строка - получаем данные о файле(используйте Console.log();)

Нажмите, чтобы открыть в новом окне.



9 строка - Создаём объект XMLHTTP

10 строка - Открываем асинхронное соединение

12 строка - Ждём ответа от сервера

14 строка - возвращает состояние объекта(0-4)

15 строка - код 200 (если страница не найдена вернет 404)

17 строка - выводим результат работы скрипта(alert)

<script>

function post()

{

  let file = document.getElementById('file').files[0]

  let data = new FormData()

  data.append('file', file)

  var xhr = new XMLHttpRequest();

  xhr.open("POST", "страница_с_php" , true);

  xhr.send(data);

  xhr.onreadystatechange = function()

  {

    if (xhr.readyState == 4) {

      if(xhr.status == 200) {

        return_data = (xhr.responseText);

        alert(return_data);

      }

    }

  }

}

</script>




Обработчик javascript-post для загрузки файлов

Не буду подробно останавливаться на обработчике javascript-post для загрузки файлов - я уже(надеюсь) подробно рассказал о move_uploaded_file


<?

if ( 0 < $_FILES['file']['error'] ) {

echo 'Error: ' . $_FILES['file']['error'] . '<br>';

}

else

{

if(is_file(__DIR__.'/' . $_FILES['file']['name']))

{

echo 'Такой файл уже существует';

}

else

{

move_uploaded_file($_FILES['file']['tmp_name'], __DIR__.'/' . $_FILES['file']['name']);

if(is_file(__DIR__.'/' . $_FILES['file']['name']))

{

echo 'файл загружен';

}

else

{

echo 'файл не загружен';

}

}

}

И далее соберем это все в один архив, чтобы вы могли его скачать и пользоваться!