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

15.11.2021 Марат 1012 js | download | js_tag |

Как "загрузить файл javascript"- рассмотрим загрузку файла на сервер с помощью javascript, с загрузкой этого файла на сервер. Напишем скрипт, и php код. Не буду перечислять все способы загрузки файлов, для этого есть отдельная страница

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

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

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

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

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

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

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

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

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

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

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

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

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

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

input с типом file

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

Любой элемент 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 для загрузки файлов

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 'файл не загружен';
    }
  }
}

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

Не стесняемся говорить спасибо!

Теги:
javascript загрузить файл
javascript download file  
javascript загрузка файла на сервер	  

На сайте сейчас :