Код?... Это просто!
php js Jquery JsPhp blog
ТЕГИ:
php (100)
js (87)
php date (19)
online (14)
html (14)
js slice (13)
js array (11)
encode (11)
js date (10)
php array (10)
hash (10)
info (7)
dosite (7)
php img (7)
jsphp (6)
Показать еще :

Отправка данных и файла js

Как "Отправить и текст и файл javascript". Отправить данные из поля ввода для текста и файл на чистом javascript. Есть несколько способов отправить и текст и файл вт js, с примерами и кодом.

Пошаговое создание скрипта для отправки данных и файла одновременно javascript

  1. В чем проблем отправки длинных и файла на чистом javascript
  2. Отправляем данные и файл на javascript(XMLHttpRequest)
    1. Html код отправки данных и файла на javascript
    2. Javascript код отправки данных и файла
    3. Php код отправки данных и файла
    4. Скачать код отправки и получения файла и данных javascript.
  1. В чем проблем отправки длинных и файла на чистом javascript

    Я не могу знать всё и я не учился быть программистом... не буду повторяться о причинах создания данного сайта - здесь : уже писал об этом.

    Оказывается, что... используя "XMLHttpRequest" не совсем просто отправить "и данные и файл".

    Но давайте во всем разберемся, как это я люблю делать... начнем с отправки по отдельности:

    Как вы наверное знаете, что...файл можно отправить:

    На чистом javascript:

    Используя XMLHttpRequest : пример - это можно понять . Используя fetch - я им еще не пользовался, но, как мне кажется способ проще чем которым я пользуюсь сейчас... "XMLHttpRequest" - прочему .

    На jquery.

    Думаю, что вы без труда найдете отправку файла с этой библиотекой.

    Отправка данных: В двух средах я уже делал на тему отправки данных.

    На javascript.

    На jquery jquery.

    И далее... меня интересовал вопрос, соединить пункт 1.1 и пункт 3, т.е. отправить и файл и данные на числом "javascript" используя "XMLHttpRequest"... и вы не поверите! Нет таких данных.

    Единственное , что я нашел :

    по поводу отправки данных и текста пишет developer.mozilla.org(почему-то якорь не работает, нас интересует абзац "Dealing with binary data - это последний абзац - это просто какой-то ад, даже для меня... понять ничего невозможно! И по этому сайту вы должны научиться чему либо... wall

    Поэтому!

    Я потратил почти целый день для вас, чтобы вы могли моим кодом воспользоваться, см следующий пункт:

    1. Отправляем данные и файл на 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.

    2. 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>

    3. 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);

      }

      }

      }

      }

    4. 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;

    5. Скачать код отправки и получения файла и данных javascript.

  2. Скачать код отправки и получения файла и данных javascript.

    Если вы не смогли разобраться или ещё по какой причине... вы можете скачать уже готовый скрипт отправки и данных и файла в одном архиве.

    Что в архиве?

    В архиве вот этот пример.

    Скачать код отправки и получения файла и данных javascript.

    С вас чашка кофе и вы можете скачать весь код отправки и получения файла и данных javascript здесь.

jsphp.ru есть здесь:
Полезные ссылки:
ruweb
Я писал немного о ruweb.net!
Помочь проекту JsPhp.ru

Что можно сделать!?

Поделиться ссылкой! C друзьями или врагами!


Помочь проекту JSPHP.RU: Помочь проекту JSPHP.RU прокомментировать :

Скоро...


Мои Проекты :

Скоро...



О хостинге :

Скоро...


© jsphp.ru 2023 - 2024 , Аминев Марат. Контакты
Страница загружена за : 0.008747 секунд.