Плагин ajaxImageUpload: оригинальное jQuery-решение для загрузки изображений

Оригинальный плагин ajaxImageUpload — это решение на jQuery, которое позволяет выполнять пакетную загрузку, предварительный просмотр, удаление и настройку размера загружаемых файлов. Также можно настроить количество загружаемых изображений и способ их добавления. Кроме того, есть возможность задать функции обратного вызова до и после загрузки, а также при удалении файлов.

Если вам нравится этот плагин, не забудьте поставить лайк!

github: https://github.com/gouguoyin/ajax-image-upload

gitee: https://gitee.com/gouguoyin/ajax-image-upload

demo: http://www.gouguoyin.com/ajax-image-upload

Перед загрузкой:

Демонстрация снимка экрана: https://image-static.segmentfault.com/307/630/3076307501-5e7f37312c655.

После загрузки:

Демонстрация снимка экрана: https://image-static.segmentfault.com/241/131/2411318232-5e7f373f1a8eb.

Использование

1. Сначала добавьте jQuery и файлы CSS и JS плагина, убедившись, что jQuery добавлен первым.

<link href="./css/jquery.upload.min.css" type="text/css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/3.1.0/jquery.min.js"></script>
<script src="./js/jquery.upload.min.js"></script>

2. Создайте HTML-структуру:

<div class="upload-box1"></div>

<div class="upload-box2"></div>

3. Настройте плагин:

$(".upload-box1").ajaxImageUpload({
    fileInput: 'file1', //имя кнопки загрузки, то есть значение name поля input[type=file]
    postUrl: './upload1.php', //адрес сервера для загрузки
});

$(".upload-box2").ajaxImageUpload({
    fileInput: 'file2', //имя кнопки загрузки, то есть значение name поля input[type=file]
    postUrl: './upload2.php', //адрес сервера для загрузки
});

4. Обработка на стороне сервера

Обработка на сервере не имеет особых ограничений, пока сервер принимает данные формы file и обрабатывает их, возвращая JSON-данные. В данных JSON успешного выполнения должен быть код со значением 200, а src — URL изображения после загрузки. При неудачной загрузке данные JSON должны содержать код и сообщение об ошибке.

Например, для ./upload1.php:

$file = $_FILES["file1"]; // должно соответствовать fileInput в конфигурации
if(!isset($file['tmp_name']) || !$file['tmp_name']){
    echo json_encode(['code' => 401, 'msg' => 'Нет файла для загрузки']);
    return false;
}
if($file["error"] > 0){
    echo json_encode(['code' => 402, 'msg' => $file["error"]]);
    return false;
}

$upload_path = dirname(__FILE__) . "/uploads/" . date('Ymd/');
$file_path   = "./uploads/" . date('Ymd/');

if(!is_dir($upload_path) && !mkdir($upload_path, 0777, true)){
    echo json_encode(array('code' => 403, 'msg' => 'Ошибка создания каталога загрузки, проверьте права доступа'));
    return false;
};

if(move_uploaded_file($file["tmp_name"], $upload_path.$file['name'])){
    echo json_encode(['code' => 200, 'src' => $file_path . $file['name']]);
    return true;
}else{
    echo json_encode(['code' => 404, 'msg' => 'Загрузка не удалась']);
    return false;
}

Рекомендуется использовать easyhttp — лёгкий, семантический и дружественный к IDE HTTP-клиент — для обработки.

Параметры

Журнал изменений

2021-07-05

• Добавлена функция delete().

2020-04-30

• Изменено имя параметра ajaxUrl на postUrl.
• Изменено имя параметра ajaxData на postData.
• Добавлен параметр width для управления шириной изображения после загрузки.
• Добавлен параметр height для управления высотой изображения после загрузки.

2020-03-30

• Исправлена ошибка, когда проверка формата изображения не срабатывала при наличии нескольких . в имени файла.
• При наведении курсора на кнопку загрузки отображается указатель мыши.
• Оптимизированы стили CSS, удалены ненужные стили.
• Улучшена логика определения функции complete().

2020-03-28

• Решена проблема невозможности удалить изображение, если allowZoom установлено в false.
• Добавлен параметр imageUrl для отображения ранее загруженных изображений.
• Добавлен параметр appendMethod для настройки способа добавления изображений (before или after).

2020-03-25

• Переписаны стили CSS с добавлением префикса ggy_ перед классами, чтобы избежать загрязнения CSS.
• Решена проблема, когда один и тот же файл можно было загрузить только один раз.
• Решена проблема с повторной загрузкой одного и того же файла без эффекта.
• После неудачной загрузки необходимо обновить страницу, чтобы снова попытаться загрузить файл.
• Реализована функция пакетной загрузки.
• Добавлена функция обратного вызова complete() для уведомления о завершении всех загрузок.

Задачи — Пакетная загрузка (x). — Увеличение изображения (x). — Устранение зависимости от jQuery (–). — Обрезка и сжатие (–). — Сортировка перетаскиванием (–).