Код?... Это просто!
php js Jquery JsPhp blog
ТЕГИ:
js (87)

php (101)
js (87)
php date (19)
html (14)
online (14)
js slice (13)
encode (11)
js array (11)
php array (10)
js date (10)
engine (10)
hash (10)
dosite (9)
info (7)
php img (7)
jsphp (6)
Показать еще :

Загружаем файл на сервер javascript

"Загрузить файл на сервер с помощью javascript". Что нужно для загрузки файла на сервер js? Пример кода, который загрузит ваш файл на сервер. И скачать весь код загружать файл js.

О загрузке файлов на сервер Js.

  1. Форма для загрузки файлов на сервер javascript.
  2. Код формы для загрузки файла на сервер с помощью javascript.
  3. Js код для загрузки файла на сервер
  4. Пример Js кода для загрузки файла на сервер
  5. Php код для загрузки файла на сервер
  6. Код для загрузки файла на сервер.
  7. Скачать скрипт js для загрузки файла на сервер.
См. ещё : переименовать имя файла после загрузки php
  1. Форма для загрузки файлов на сервер 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>

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

      }

     }

    }

    }

  3. Php код для загрузки файла на сервер

    Как вы уже выше поняли, что отдельно javascript не может загрузить файл на сервер, поэтому ему нужен "Php". Для этого соберем код :

    Первое, что вас, естественно, куда будем сохранять файл вашего загруженного файла:

    $путь_до_файла = $_FILES['file']['name'];

    Если вдруг, какие-то ошибки их надо вывести, чтобы понять, что надо делать!

    echo 'Error: ' . $_FILES['file']['error'];

    Чтобы файл не перезаписывался сделаем простейшую проверку используя 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 'файл не загружен';

    }

    }

    }

  4. Скачать скрипт js для загрузки файла на сервер.

    Вы можете самостоятельно собрать из выше приведенного кода все ваши файлы и скрипт по загрузке файлов на сервер(либо скачать этот код).

    Но!

    Есть альтернативный путь: с вас чашка кофе и забирайте весь скрипт загрузки файлов на сервер с помощью Js - скачиваем здесь, см ниже, что добавлено:

    Что добавлено?

    Изменен вшений вид формы смотри: пример - отправка файлов на сервер отключена! Я хотел бы вам показать, как это работает, но для этого нужно делать кучу проверок и т.д.

    Добавлен скрипт перетаскивания файла внутрь формы.

    Когда вы перетащите файл в поле для файла - она должна соответствующим образом отреагировать! И выдать результат, что:

    Файл получил!

    Что делать с архивом загрузки файлов на сервер Js.

    Загрузили архив.

    Бросаем на сервер.

    Открываем по вашему пути файл "index.html":

    https://ваш_сайт.ru/путь/index.html

    После отправки файла на сервер, файл сохранится в этой папке.

    Чтобы изменить путь до загружаемого файла измените переменную:

    $путь_до_файла=$_FILES['file']['name']
    Пример изменения пути:

    Предположим, что у вас есть папка, которая находится по адресу и вы хотите загружать файлы в эту папку:

    https://ваш_сайт.ru/example/

    Вам нужно написать вот такую конструкцию:

    $путь_до_файла=$_SERVER['DOCUMENT_ROOT'] .'/example/'.$_FILES['file']['name'];
jsphp.ru есть здесь:
Полезные ссылки:
ruweb
Я писал немного о ruweb.net!
Помочь проекту JsPhp.ru

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

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


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

Скоро...


Мои Проекты :

Скоро...



О хостинге :

Скоро...


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