jQuery плагин для отображения превью загружаемого файла

Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.

Загрузка

Исходный код библиотеки можно найти в каталоге assets/js/.

Установка

1. Копируем jQuery и плагин:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.uploadPreview.min.js"></script>

2. Форма загрузки:

<div id="image-preview">
  <label for="image-upload" id="image-label">Choose File</label>
  <input type="file" name="image" id="image-upload" />
</div>

3. Вызываем плагин с соответствующими параметрами:

<script type="text/javascript">
$(document).ready(function() {
  $.uploadPreview({
    input_field: "#image-upload",   // По умолчанию: .image-upload
    preview_box: "#image-preview",  // По умолчанию: .image-preview
    label_field: "#image-label",    // По умолчанию: .image-label
    label_default: "Choose File",   // По умолчанию: Choose File
    label_selected: "Change File",  // По умолчанию: Change File
    no_label: false,                // По умолчанию: false
    success_callback: null          // По умолчанию: null
  });
});
</script>

Примеры

http://opoloo.github.io/jquery_upload_preview/

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://github.com/opoloo/jquery_upload_preview
Перевел: Станислав Протасевич
Урок создан: 21 Мая 2017
Просмотров: 14859
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^