PP.Ui.FileUpload (settings)
settings. JSON-объект со значениями свойств компонента.
Конструктор FileUpload создает экземпляр компонента FileUpload.
В связи с ограничениями браузера загрузка нескольких файлов одновременно не доступна.
Для выполнения примера в теге HEAD подключите ссылки на библиотеку PP.js и визуальные стили PP.css. Для размещения компонента добавьте на страницу элементы DIV с идентификаторами «fileUpload».В событии onload тега <body> необходимо указать вызов функции createFileUpload(). В теге SCRIPT добавьте код создания компонента FileUpload:
function createFileUpload() {
// Создаем компонент для загрузки файла
fileUpload = new PP.Ui.FileUpload({
// Устанавливаем родительский элемент
ParentNode: document.getElementById("fileUpload"),
// Устанавливаем признак появления дополнительных полей при повторной загрузке
AutoExpandable: true,
// Устанавливаем максимальное число полей ввода
MaxInputsCount: 5,
// Устанавливаем ссылку на обработчик файлов
PostUrl: "//localhost:2755/samples/",
// Устанавливаем параметры кнопки для выбора файлов
FileButton: {
Content: "Обзор...",
Width: 60
}
});
// Устанавливаем обработчик события отправки файлов
fileUpload.FileUploaded.add(function(sender, args) {
console.log("Файлы загружены");
});
// Устанавливаем обработчик события изменения значения загрузчика файлов
fileUpload.ValueChanged.add(function(sender, args) {
console.log("Изменилось значение загрузчика файлов");
});
}
После выполнения примера на страницу будет добавлен компонент FileUpload, имеющий следующий вид:
При нажатии на кнопку «Обзор...» будет открыто окно для выбора файла. После того как файл загружен, его название будет отображаться в текстовом поле и появится дополнительное поле:
В консоль будет выведено сообщение об изменение значения загрузчика файлов:
Изменилось значение загрузчика файлов
Дополнительное поле может появляться не более 5 раз.
Добавляем файл программными средствами:
// Добавляем файл
fileUpload.setFileName("Файл.txt");
Получаем список загружаемых файлов:
var files = fileUpload.getFiles();
// Получаем загружаемые файлы
console.log("Загружаемые файлы: ");
for (var i = 0; i < files.length; i++) {
console.log(files[i].name);
}
В результате в консоль будет выведен список загружаемых файлов:
Загружаемые файлы:
Результат.txt
Файл.txt
Отправляем файлы:
//Отправляем файлы fileUpload.send();
В результате в консоль будет выведено сообщение об отправке:
Файлы загружены
Очищаем поля ввода:
// Очищаем поля ввода fileUpload.clearInputs();
В результате поля ввода будут пустыми:
См. также: