[gray]
[red]Основные плагина[/red]
В пакет загрузки плагина поставляется в комплекте с пользовательским интерфейсом на основе Bootstrap.
Существует также версия, доступная для JQuery UI.
Однако, если вы хотите построить свой собственный пользовательский интерфейс, можно
использовать только базовую версию плагина и минимальной настройки.
Следующее является альтернативой в этом посте index.html еще с сайта автора только с минимальными требованиями
и простым сделана обработчика обратного вызова (см. API и параметры о том, как использовать различные варианты и обратные вызовы):
Code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
Ответ и типа данных
В приведенном выше примере задает тип данных, возможность JSON,
ожидая, что сервер возвращает ответ JSON для каждого загружаемого файла.
Однако, это также можно обрабатывать HTML типы контента, как ответ или любой
другой тип данных которые можно обработать в вашем сделанным обработчик.
Как отображать прогресс загрузки с основной плагином
FileUpload плагин вызывает прогресса событий как для индивидуальных добавления (**progress**)
и все запущенные добавления комбинированные (** progressall **).
Обработчики событий могут быть установлены через механизм
привязки событий или в качестве виджета вариантов (см. API документацию и параметры):
Code
$('#fileupload').fileupload({
/* ... */
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});
В предыдущем коде предполагается, прогресс узел с внутренним элементом, который отображает ход статус через его ширину в процентах:
Code
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
Внутренний элемент должен иметь цвет фона, отличный контейнер узла, устанавливается с помощью CSS и нуждается в высоту применяются:
Code
.bar {
height: 18px;
background: green;
}
Как связать файл узла элемента в течение жизненного цикла загрузки
Часто вам будет отображаться файл для загрузки в узле элемента.
Это может быть сделано в дополнение обратного вызова.
Чтобы иметь возможность ссылаться на тот же узел элемента в другой обратные вызовы,
связанные с загрузки, вы можете воспользоваться опцией контекста
(который на самом деле является возможность jQuery.ajax):
Code
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<p/>').text('Uploading...').appendTo(document.body);
data.submit();
},
done: function (e, data) {
data.context.text('Upload finished.')
}
});
});
Как начать добавления с нажатием кнопки
На основании предыдущего примера, можно начать добавления на нажатие кнопки, а не автоматически:
Code
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<button/>').text('Upload')
.appendTo(document.body)
.click(function () {
$(this).replaceWith($('<p/>').text('Uploading...'));
data.submit();
});
},
done: function (e, data) {
data.context.text('Upload finished.')
}
});
});
Как использовать функциональные изменения размера изображения с основной плагином
Включить следующие дополнительные сценарии (включая jquery.fileupload-php.js после того jquery.fileupload.js):
Code
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
<script src="js/jquery.fileupload-fp.js"></script>
Если вам не переопределить добавить опцию обратного вызова, вы будете иметь
функциональные изменения размера изображения автоматически.
В противном случае, вы можете использовать процесс API вроде этого:
Code
$('#fileupload').fileupload({
/* ... */
add: function (e, data) {
$(this).fileupload('process', data).done(function () {
data.submit();
});
}
});
Пожалуйста, обратите внимание на API и параметры документации.
[/gray]