Загружаем файл на сервер javascript
"Загрузить файл на сервер с помощью javascript". Что нужно для загрузки файла на сервер js? Пример кода, который загрузит ваш файл на сервер. И скачать весь код загружать файл js.
О загрузке файлов на сервер Js.
- Форма для загрузки файлов на сервер javascript. Код формы для загрузки файла на сервер с помощью javascript.
- Js код для загрузки файла на сервер Пример Js кода для загрузки файла на сервер
- Php код для загрузки файла на сервер Код для загрузки файла на сервер.
- Скачать скрипт js для загрузки файла на сервер.
Форма для загрузки файлов на сервер javascript.
Первое, что потребуется для загрузки файла с помощью javascript это форма, давайте напишем её:
Возьмем стандартный код простой страницы и добавим, всё, что нам требуется для формы загрузки файлов на сервер Js.
javascript выделим в отдельный файл, чтобы не мешать всё в одном файле, подключаем его как внешний скрипт :
<script src="js.js"></script>
Используем для визуализации нашего поля загрузки файла используем тип file.
Функцию "post()" будем вызывать прямо в кнопке button с помощью onclick.
<input type="file" id="file">
<button onclick="post();">Загрузить файл</button>
Код формы для загрузки файла на сервер с помощью javascript.
Соберем в одно целое код страницы, скрипт и форму для загрузки файлов на сервер js в одно целое:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js.js"></script>
</head>
<body>
<div id="form">
<input type="file" id="file">
<button onclick="post();">Загрузить файл</button>
</div>
</body>
</html>
Js код для загрузки файла на сервер
Смысла рассказывать весь код по загрузке файла на сервер построчно смысла нет никакого, если вы новичок, то вы ничего не поймете, а если вы профи, то вы уже все знаете, поэтому лишь пару слов по алгоритму:
Алгоритм загрузки файла на сервер js:
В форме выбираем файл для загрузки на сервер js.
При клике на кнопку, вызывается функция post.
Функция "post" отправляет массив post на php файл "php.php"(который и будет загружать выбранный файл на сервер).
javascript самостоятельно без php не может работать с сервером.
Для того, чтобы понять, что происходит существует xhr.readyState, который вам будет возвращать состояние вашего запроса - нас интересует цифра "4".
И второе, что нам потребуется xhr.status, который должен быть "200".
И выводим с помощью alert, что ваш файл "php" вывел с помощью "echo".
Пример Js кода для загрузки файла на сервер
Соберем весь код функции "post":
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.php" , true);
xhr.send(data);
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
if(xhr.status == 200)
{
alert(xhr.responseText);
}
}
}
}
Php код для загрузки файла на сервер
Как вы уже выше поняли, что отдельно javascript не может загрузить файл на сервер, поэтому ему нужен "Php". Для этого соберем код :
Первое, что вас,
Если вдруг, какие-то ошибки их надо вывести, чтобы понять, что надо делать!
Чтобы файл не перезаписывался сделаем простейшую проверку используя is_file:
if(is_file( $путь_до_файла ))
{
echo 'Такой файл уже существует';
}
Если требуется создавать новый файл с новым названием, требуется ввести в название переменной, другую переменную, например дату создания используя функцию date.
Загружаем файл с помощью move_uploaded_file.
Далее проверяем загрузился ли файл на сервер.
И выводим результат с помощью echo.
Соберем весь код:
Код для загрузки файла на сервер.
Код php обработает запрос javascript по загрузке файла на сервер.
<?
//путь_до_файла
$путь_до_файла = $_FILES['file']['name'];
if ( 0 < $_FILES['file']['error'] ) {
echo 'Error: ' . $_FILES['file']['error'];
}
else
{
if(is_file( $путь_до_файла ))
{
echo 'Такой файл уже существует';
}
else
{
move_uploaded_file($_FILES['file']['tmp_name'], $путь_до_файла );
if(is_file( $путь_до_файла ))
{
echo 'файл загружен';
}
else
{
echo 'файл не загружен';
}
}
}
Скачать скрипт js для загрузки файла на сервер.
Вы можете самостоятельно собрать из выше приведенного кода все ваши файлы и скрипт по загрузке файлов на сервер(либо скачать этот код).
Есть альтернативный путь: с вас чашка кофе и забирайте весь скрипт загрузки файлов на сервер с помощью Js - скачиваем здесь, см ниже, что добавлено:
Изменен вшений вид формы смотри: пример - отправка файлов на сервер отключена! Я хотел бы вам показать, как это работает, но для этого нужно делать кучу проверок и т.д.
Добавлен скрипт перетаскивания файла внутрь формы.
Когда вы перетащите файл в поле для файла - она должна соответствующим образом отреагировать! И выдать результат, что:
Что делать с архивом загрузки файлов на сервер Js.
Бросаем на сервер.
Открываем по вашему пути файл "index.html":
После отправки файла на сервер, файл сохранится в этой папке.
Чтобы изменить путь до загружаемого файла измените переменную:
Предположим, что у вас есть папка, которая находится по адресу и вы хотите загружать файлы в эту папку:
Вам нужно написать вот такую конструкцию:
Что можно сделать!?
Поделиться ссылкой! C друзьями или врагами!
Скоро...
Скоро...
Скоро...