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

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

// Handle the `paste` event
document.addEventListener('paste', function(evt) {
    // Get the data of clipboard
    const clipboardItems = evt.clipboardData.items;
    const items = [].slice
        .call(clipboardItems)
        .filter(function(item) {
            // Filter the image items only
            return item.type.indexOf('image') !== -1;
        });
    if (items.length === 0) {
        return;
    }

    const item = items[0];
    // Get the blob of image
    const blob = item.getAsFile();
});

Из изображения blob, мы можем предварительно просмотреть его, как вы видите в живом примере ниже:

// Assume that we have an `img` element
// <img id="preview" />

const imageEle = document.getElementById('preview');
imageEle.src = URL.createObjectURL(blob);

или загрузите его на сервер с помощью Ajax-запроса:

// Create a new FormData
const formData = new FormData();
formData.append('image', blob, 'filename');

// Create new Ajax request
const req = new XMLHttpRequest();
req.open('POST', '/path/to/back-end', true);

// Handle the events
req.onload = function() {
    if (req.status >= 200 && req.status < 400) {
        const res = req.responseText;
        // Do something with the response
        // ...
    }
};

// Send it
req.send(formData);

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

Войти на сайт

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