Подробно о загрузке файлов в javascript
- Как загружать файлы с помощью javascript - форма
- Скрипт javascript для загрузки файлов
- Обработчик javascript-post для загрузки файлов
- Скачать
Как загружать файлы с помощью javascript - форма
Как вы наверное знаете... javascript самостоятельно не умеет загружать файлы на сервер! Для этого ему нужен php.
Вчера буквально написал страницу о функции, которая и поможет нам в загрузке файлов с помощью "javascript"
Но давайте все по порядку!
Что вообще требуется ..
Первое что нам потребуется это форма для загрузки файла.
Второе... нам потребуется знание javascript post, чтобы отправить post запрос и получить ответ.
И + php функция move_uploaded_file - которая умеет загружать файл на сервер!
Требуемые знания мы перечислили... перейдем к форме:
Форма для загрузки файлов с помощью javascript
Не обязательно пример формы должен быть таким... - это всего лишь один из примеров использования формы для загрузки файлов в javascript ... нам потребуется:
input с типом file
+ Селектор id - далее он нам понадобится...
Любой элемент Dom с возможностью отследить нажатие(onclick) - для отправки post запроса... В приведенном примере onclick - поставим прямо внутрь кнопки 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 'файл не загружен';
}
}
}
И далее соберем это все в один архив, чтобы вы могли его скачать и пользоваться!
