Управление HTML DOM с ванильным JavaScript

Авторизоваться

Функция ниже отправляет выбранные файлы из элемента fileEle в серверную часть:

const upload = function(fileEle, backendUrl) {
    return new Promise(function(resolve, reject) {
        // Get the list of selected files
        const files = fileEle.files;

        // Create a new FormData
        const formData = new FormData();

        // Loop over the files
        [].forEach.call(files, function(file) {
            formData.append(fileEle.name, file, file.name);
        });

        // Create new Ajax request
        const req = new XMLHttpRequest();
        req.open('POST', backendUrl, true);

        // Handle the events
        req.onload = function() {
            if (req.status >= 200 && req.status < 400) {
                resolve(req.responseText);
            }
        };
        req.onerror = function() {
            reject();
        };

        // Send it
        req.send(formData);
    });
};

Использование

Предположим, что у нас есть инпут file, который позволяет пользователю выбрать несколько файлов:

<input type="file" id="upload" multiple />

Мы можем использовать следующий код внутри обработчика события click, которая выполняет загрузку:

const fileEle = document.getElementById('upload');

upload(fileEle, '/path/to/back-end').then(function(response) {
    // `response` is what we got from the back-end
    // We can parse it if the server returns a JSON
    const data = JSON.parse(response);
    ...
});

Чтобы оставить комментарий, необходимо авторизоваться

Войти на сайт

Как управлять DOM на чистом JavaScript?

Использование