队列中图像文件的缩略图

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" />';
    };
}

队列中图像文件的缩略图

Thumbnail from Image Files in queue

javascript

jquery

file-upload

image

thumbnails