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

18/04/2016 19:00

Данный материал предоставлен сайтом PacificSky.Ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.

Наверное многие сталкивались с вопросом "Как загрузить файл на сервер с помощью 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_ru_js_uploader.zip [1,24 Kb] (cкачиваний: 2120)

Пароль от архива: pacificsky

Рецепты / JS

Fixlix
1
55 901

« Октябрь 2024 »
Пн	Вт	Ср	Чт	Пт	Сб	Вс
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

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

Комментариев 1