Загрузка изображений на сервер

В этом разделе

1. JavaScript-класс для загрузки файла изображения на сервер.

Класс VintasoftFileAPI - это статический класс JavaScript, который помогает управлять файлами на сервере. Для работы класса требуется веб сервис, который управляет файлами на сервере. В качестве веб сервиса можно использовать контроллер ASP.NET Core Web API (VintasoftFileApiController), контроллер ASP.NET Web API 2 (VintasoftFileApi2Controller) или HTTP обработчик ASP.NET (Vintasoft.Imaging.Web.HttpHandlers.VintasoftFileHandler).

Вот JavaScript код, который демонстрирует, как загрузить файл изображение на сервер:

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 код, который демонстрирует, как загрузить несколько файлов изображений на сервер:

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-изображение на сервер:

JavaScript

// 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.

Отправить отзыв