Загрузка файла на сервер с помощью JavaScript и библиотеки JQuery

Наверное многие сталкивались с вопросом "Как загрузить файл на сервер с помощью JS и JQuery?".
И вероятно не у всех получилось это сделать. На самом деле все не так сложно как кажется.
В данном уроке я опишу процесс загрузки файла на сервер(хостинг) .
Для обмена данными между браузером и веб-сервером, используется технология ajax.
Версия JQuery используемая в рецепте: 2.2.2.

Загрузка файла на сервер с помощью JavaScript и библиотеки JQuery


Создаем примитивную разметку из тегов html, head и body.
В теге head необходимо прописать путь до библиотеки jquery.
В примере я использую jquery с сервера google.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    </head>
    <body>
    <body>
</html>


В теге body создаем форму, которая состоит из тега input и button.
С помощью input type="file" осуществляется выбор файла для загрузки.
Тег button необходим для запуска js кода на передачу файла.


Форме задаем name="uploader", enctype="multipart/form-data", method="POST".
Имя формы: name="uploader"
Способ кодирования данных формы: enctype="multipart/form-data"
Метод передачи данных: method="POST"



<form name="uploader" enctype="multipart/form-data" method="POST">
        Отправить этот файл: <input name="userfile" type="file" />
        <button type="submit" name="submit">Загрузить</button>
</form>


Весь код html и js разметки:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    </head>
    <body>
    <form name="uploader" enctype="multipart/form-data" method="POST">
        Отправить этот файл: <input name="userfile" type="file" />
        <button type="submit" name="submit">Загрузить</button>
    </form>
    </body>
</html>


Переходим к java script коду.
Для передачи файла необходимо передавать форму целиком:
$("form[name='uploader']").submit(function(e) {


Считываем данные формы в переменную:
var formData = new FormData($(this)[0]);


Далее для передачи данных на веб-сервер используем технологию ajax.
В случае успешной передачи файла во всплывающем окне будет отображено соответствующее сообщение.
В случае возникновения ошибки или отсутствии файла будет отображено сообщение с текстом возникшей проблемы.

 $.ajax({
            url: 'file.php',
            type: "POST",
            data: formData,
            async: false,
            success: function (msg) {
                alert(msg);
            },
            error: function(msg) {
                alert('Ошибка!');
            },
            cache: false,
            contentType: false,
            processData: false
        });


Весь код на java script с использование jquery:

    <script type="text/javascript">
    $("form[name='uploader']").submit(function(e) {
        var formData = new FormData($(this)[0]);

        $.ajax({
            url: 'file.php',
            type: "POST",
            data: formData,
            async: false,
            success: function (msg) {
                alert(msg);
            },
            error: function(msg) {
                alert('Ошибка!');
            },
            cache: false,
            contentType: false,
            processData: false
        });
        e.preventDefault();
    });
    </script>


Теперь остался код на стороне сервера для приема данных с формы методом POST запроса.

Получаем корневую директорию сайта и назначаем папку для загрузки файлов:
$uploaddir = $_SERVER['DOCUMENT_ROOT'].DIRECTORY_SEPARATOR.'uploads'.DIRECTORY_SEPARATOR;


Считываем загружаемый файл:
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);


Проверяем загружен ли файл.
В соответствии с входящими данными назначаем сопровождающее сообщение.
Если файл не загружен, загружаем в директорию указанную в $uploadfile:

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
    $out = "Файл корректен и был успешно загружен.\n";
} else {
    $out = "Возможная атака с помощью файловой загрузки!\n";
}


При выполнении указанных действий возвращается ответ.

Весь код на php:

<?php

$uploaddir = $_SERVER['DOCUMENT_ROOT'].DIRECTORY_SEPARATOR.'uploads'.DIRECTORY_SEPARATOR;
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
    $out = "Файл корректен и был успешно загружен.\n";
} else {
    $out = "Возможная атака с помощью файловой загрузки!\n";
}

echo $out;

?>


Весь html код включая js:


<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    </head>
    <body>
    <form name="uploader" enctype="multipart/form-data" method="POST">
        Отправить этот файл: <input name="userfile" type="file" />
        <button type="submit" name="submit">Загрузить</button>
    </form>
    <script type="text/javascript">
    $("form[name='uploader']").submit(function(e) {
        var formData = new FormData($(this)[0]);

        $.ajax({
            url: 'file.php',
            type: "POST",
            data: formData,
            async: false,
            success: function (msg) {
                alert(msg);
            },
            error: function(msg) {
                alert('Ошибка!');
            },
            cache: false,
            contentType: false,
            processData: false
        });
        e.preventDefault();
    });
    </script>
    </body>
</html>


Скачать файл с исходным кодом:

Пароль от архива: pacificsky
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
  • Яндекс.Метрика
  • Счетчик PR-CY.Rank
  • Рейтинг@Mail.ru