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 и саму библиотеку. В документации написано много полезных вещей, которые на клиенте не составить большого труда дописать.



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

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

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

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

2371

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

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

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

627


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

Markdown синтаксис »

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

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

Комментарии