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

来自队列中的图像文件的缩略图

1 个答案: