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

Question

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

Answer 1

Я понял это довольно просто. Мы захватываем загружаемое изображение, читаем его как 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" />'; 
    }; 
}