Миниатюра из файлов изображений в очереди

Я создаю пользовательскую CMS для блога. Это действительно просто, но я застрял на загрузке изображения. В основном я хочу сделать миниатюру для еще не загруженных изображений (изображения из очереди файлов). Не могли бы вы рассказать мне, как его создать с помощью JavaScript или jQuery?


javascript image jquery file-upload thumbnails
person Dawid Zbiński    schedule 19.08.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я разобрался довольно просто. Мы берем загружаемое изображение, считываем его как dataURL и помещаем результат в качестве источника изображения.

HTML:

<input type="file" name="images[]" id="images" multiple />
<div id="images-container"></div>

CSS:

.thumbnail {
    width: 150px;
    height: 150px;
    margin: 15px;
}

и, наконец, JavaScript:

var images = document.getElementById('images');
var container = document.getElementById('images-container');

images.onchange = function() {
    readFiles(images.files);
}

function readFiles(files) {
    for (var i = 0; i < files.length; i++) {
        processFile(files[i]);
    }
}

function processFile(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (event) {
        container.innerHTML = container.innerHTML + '<img src="' + reader.result + '" class="thumbnail" />';
    };
}
person Dawid Zbiński    schedule 21.08.2016