Отправка данных и файла js
Как "Отправить и текст и файл javascript". Отправить данные из поля ввода для текста и файл на чистом javascript. Есть несколько способов отправить и текст и файл вт js, с примерами и кодом.
Пошаговое создание скрипта для отправки данных и файла одновременно javascript
- В чем проблем отправки длинных и файла на чистом javascript
- Отправляем данные и файл на javascript(XMLHttpRequest)
-
Отправляем данные и файл на javascript(XMLHttpRequest)
Возьмем уже готовую страницу по отправке файла и добавим туда отправку данных, для этого вам понадобится:
Html В код html добавим еще одно поле... с данными:
<input type="text" id="text" placeholder="Введите текст">
javascript В javascript код добавим получение данных из поля текст:
let text = document.getElementById('text').value;
Php В php код заменим все echo на $echo.
Проверим выше идущий код на наличие переменной "$echo", если она есть, то добавим к переменной, что это файл : "'Файл :' ."Далее с помощью $_POST получаем текст из поля text
if($echo) $echo = 'Файл :' .$echo. "\n";
if($_POST['text']) $echo .= 'Текст :' . strip_tags($_POST['text']);
if($echo) echo $echo;
Соберем весь код:
Код отправки и получения файла и данных javascript.
Сделал отдельный пример(смотри еще стилизация поля type="file"), для отправки данных и файла на чистом javascript.
Html код отправки данных и файла на javascript
Для отправки данных и файла вам понадобятся псевдо форма с полями ввода и поставил одну кнопку, прямо внутри с onclick(не забываем, что есть 3 способа сделать клик)
Html код для отправки данных и файла на javascript
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js.js"></script>
</head>
<body>
<div id="form">
<input type="file" id="file">
<input type="text" id="text" placeholder="Введите текст">
<button onclick="post();">Загрузить файл и данные</button>
</div>
</body>
</html>
Javascript код отправки данных и файла
Следующим кодом будет "Javascript код отправки данных и файла" его тоже соберем прямо здесь:
function post()
{
let file = document.getElementById('file').files[0];
let text = document.getElementById('text').value;
let data = new FormData()
data.append('file', file)
data.append('text', text)
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 код отправки данных и файла.
Ну и соответственно.. "Php код отправки данных и файла" - этот код будут обрабатывать отправленные запросы на сервере...
<?
//путь_до_файла
$путь_до_файла = $_FILES['file']['name'];
// print_r($_POST ); exit;
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 = 'файл не загружен';
}
}
}
if($echo) $echo = 'Файл :' .$echo. "\n";
if($_POST['text']) $echo .= 'Текст :' . strip_tags($_POST['text']);
if($echo) echo $echo;
Скачать код отправки и получения файла и данных javascript.
В чем проблем отправки длинных и файла на чистом javascript
Я не могу знать всё и я не учился быть программистом... не буду повторяться о причинах создания данного сайта - здесь : уже писал об этом.Оказывается, что... используя "XMLHttpRequest" не совсем просто отправить "и данные и файл".
Но давайте во всем разберемся, как это я люблю делать... начнем с отправки по отдельности:
На чистом javascript:
На jquery.
Думаю, что вы без труда найдете отправку файла с этой библиотекой.
На javascript.
На jquery jquery.
Единственное , что я нашел :
по поводу отправки данных и текста пишет developer.mozilla.org(почему-то якорь не работает, нас интересует абзац "Dealing with binary data - это последний абзац - это просто какой-то ад, даже для меня... понять ничего невозможно! И по этому сайту вы должны научиться чему либо... 
Я потратил почти целый день для вас, чтобы вы могли моим кодом воспользоваться, см следующий пункт:
Скачать код отправки и получения файла и данных javascript.
Если вы не смогли разобраться или ещё по какой причине... вы можете скачать уже готовый скрипт отправки и данных и файла в одном архиве.
В архиве вот этот пример.
Скачать код отправки и получения файла и данных javascript.
С вас чашка кофе и вы можете скачать весь код отправки и получения файла и данных javascript здесь.
