Ajax загрузка картинки на сервер

Загружаем изображение на сервер с использованием библиотеки


Понадобилось в одном проекте делать загрузку изображения без перезагрузки страницы. Нужно было хорошее и простое решение. Основная документация по библиотеке здесь: https://github.com/danielm/uploader. Я покажу простой пример с минимальной проверкой на картинку и минимальным кодом.

HTML, разметка. Создадим директорию images и выведем какую то картинку-заготовку (test.png — просто закинем рядом с папкой в корень, к примеру) и форму загрузки:

<p>Загрузите картинку и она появится здесь:</p>
<img id="target" src="test.png" alt="">

<form id="form-load-image">
   <input id="file-load-field" name="imag" type="file">
   <p class="message-load"></p>
</form>

JS. Вешаем обработку на форму:

$("#form-load-image").dmUploader({
    url: "upload.php",
    onBeforeUpload: function (id) {
        $(".message-load").text("Загружаю на сервер картинку...");
    },
    onUploadSuccess: function (id, data) {
        if (data) {
            var fullPathToImg = location.protocol + "//" + location.hostname + "/" + data;
            $("#target").attr("src", fullPathToImg);
        } else {
            alert("Ошибка при загрузке или перемещении файла на сервер!");
        }
        $(".message-load").text("");
    }
});

PHP. Обработчик, который принимает запрос и возвращает ответ, upload.php:

$file = $_FILES["file"];
if (!empty($file)) {
    if (preg_match("/image\/.*/", $file["type"])) {
        $destinationFilePath = "./images/" . $file["name"];
        if (move_uploaded_file($file["tmp_name"], $destinationFilePath)) {
            $path = "images/" . $file["name"];
            echo $path;
        } else {
            echo false;
        }
    } else {
        echo false;
    }
} else {
    die("Доступ запрещен.");
}

В проект подключить jQuery и саму библиотеку. В документации написано много полезных вещей, которые на клиенте не составить большого труда дописать.



Похожие заметки:

Найти сумму произведений всех простых чисел

Найдите сумму произведений всех простых чисел, меньших 200, на их порядковые номера, считая, что первым простым числом является 2

Открыть здесь

Регулярное выражение для очистки повторяющихся слов

Напишите регулярное выражение, которое удаляло бы идущие подряд (через один или несколько пробелов) два и более одинаковых слов, причем так, чтобы не осталось пробелов. Считайте все слова состоящими из маленьких латинских букв

Открыть здесь


Перед тем как писать комментарии, рекомендую ознакомиться:

Markdown синтаксис »

Оформление кода »

Нужна аватарка »

Комментарии