Загрузка изображений на сервер
В этом разделе
1. JavaScript-класс для загрузки файла изображения на сервер.
Класс
VintasoftFileAPI - это статический JavaScript-класс, который помогает управлять файлами на сервере. Классу требуется веб сервис, который управляет файлами на сервере. В качестве веб сервиса может использоваться ASP.NET Core Web API контроллер (Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController), ASP.NET Веб API 2 контроллер (Vintasoft.Imaging.Web.Api2Controllers.VintasoftFileApi2Controller) либо ASP.NET HTTP обработчик (Vintasoft.Imaging.Web.HttpHandlers.VintasoftFileHandler).
Вот JavaScript код, который демонстрирует, как загрузить файл изображение на сервер:
// The file uploading process is finished successfully.
function __uploadImageFile_success(data) {
// an identifier of uploaded file
var id = data.fileId;
// other operations
}
// The file uploading process is failed.
function __uploadImageFile_error(data) {
// show information about error
}
// get the first selected file from file input
var file = document.getElementById("fileInput").files[0];
// if file exists
if (file != undefined) {
// start the asynchronous file uploading process
Vintasoft.Imaging.VintasoftFileAPI.uploadImageFile(file, __uploadImageFile_success, __uploadImageFile_error);
}
Вот JavaScript код, который демонстрирует, как загрузить несколько файлов изображений на сервер:
// The file uploading process is finished successfully.
function __uploadImageFiles_success(data){
// array with identifiers of uploaded files
var successedFiles = [];
// for each uploaded file
for (var i = 0; i < data.files.length; i++) {
// if file upload process is failed
if (!data.files[i].success)
// show error message
alert(data.files[i].errorMessage);
// if file upload process is finished successfully
else
successedFiles.push(data.files[i].fileId);
}
}
// The file uploading process is failed.
function __uploadImageFiles_error(data){
// show information about error
}
// get selected files from file input
var files = document.getElementById("filesInput").files;
var filesArray = [];
for (var i=0; i < files.length; i++)
filesArray.push(files[i]) ;
// if there are files to upload
if (filesArray.length > 0) {
// start the asynchronous file uploading process
Vintasoft.Imaging.VintasoftFileAPI.uploadImageFiles(filesArray, __uploadImageFiles_success, __uploadImageFiles_error);
}
Вот JavaScript код, который демонстрирует, как загрузить base64-изображение на сервер:
// The file uploading process is finished successfully.
function __uploadBase64Image_success(data) {
// an identifier of uploaded file
var id = data.fileId;
// other operations
}
// The file uploading process is failed.
function __uploadbase64Image_error(data) {
// show information about error
}
// start the asynchronous uploading process
// "base64Image" parameter is a base64 string that represent an image
Vintasoft.Imaging.VintasoftFileAPI.uploadBase64Image(base64Image, __uploadBase64Image_success, __uploadBase64Image_error);
2. Пользовательский интерфейс веб просмотрщика документов для загрузки файлов изображений на сервер.
Класс
WebUiElementsFactoryJS содержит зарегистрированный элемент с идентификатором "uploadFileButton", который представляет объект
WebUiButtonJS. Этот объект позволяет загрузить выбранный файл изображения на сервер и открыть его в веб просмотрщике изображений.
Класс
WebUiElementsFactoryJS содержит зарегистрированный элемент с идентификатором "uploadPdfFileButton", который представляет объект
WebUiButtonJS. Этот объект позволяет загрузить выбранный PDF-файл на сервер и открыть его в веб просмотрщике изображений.
При нажатии "uploadFileButton" либо "uploadPdfFileButton" VintaSoft Web Document Viewer начинает асинхронный процесс загрузки файла изображения с описанием "Upload file" и генерирует события "asyncOperationStarted", "asyncOperationFinished" и "asyncOperationFailed" для уведомления о состоянии процесса загрузки файла (eventArgs.description == "Upload file").
Панель инструментов для работы с файлами (объект
WebUiFileToolbarPanelJS) по умолчанию содержит кнопку "uploadImageButton".
Вот скриншот кнопки "uploadFileButton" в веб приложении:
Если вам нужно загрузить несколько файлов или настроить поддерживаемые расширения файлов, используйте класс
WebUiUploadFileButtonJS.