队列中图像文件的缩略图答案

【问题标题】：Thumbnail from Image Files in queue队列中图像文件的缩略图
【发布时间】：2016-12-26 20:05:44
【问题描述】：

我正在为博客创建自定义 CMS。这真的很简单，但我被困在图片上传上。基本上我想为尚未上传的图像（来自文件队列的图像）制作缩略图。你能告诉我用 JavaScript 或 jQuery 创建它的步骤吗？

【问题讨论】：

标签： javascript jquery image file-upload thumbnails

【解决方案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" />';
    };
}

【讨论】：