Question

我有以下代码进行图像预览

$("#weeklyOfferImages").change(function(){
    readURLWeekly(this);
});
function readURLWeekly(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('.weeklyPreview').append('<img data-src="holder.js/140x140" src="'+e.target.result'"class="offer-image img-polaroid"/>');
        },
        reader.readAsDataURL(input.files[0]);
    }
}

此代码一次只显示一个图像。如何让它显示多个图像。例如，files对象包含4个文件。

Answer 1

你只显示“0” - ＆gt; img input.files[0]

动态length - 迭代整个数组

function readURLWeekly(input) {
    if(input.files)
        for(var i = 0; i < input.files.length; i++) {
            if (input.files[i]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('.weeklyPreview').append('<img data-src="holder.js/140x140" src="' + e.target.result + '" class="offer-image img-polaroid"/>');
                },
                reader.readAsDataURL(input.files[i]);
            }
        }
}

Answer 2

也许是这样的：

$("#weeklyOfferImages").change(function(){
    readURLWeekly(this);
});
function readURLWeekly(input) {
    if (input.files) {
        for (var i=0;i<4;i++) {
            if (input.files[i]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('.weeklyPreview').append('<img data-src="holder.js/140x140" src="'+e.target.result'"class="offer-image img-polaroid"/>');
                },
                reader.readAsDataURL(input.files[i]);
            } else {
                break;
            }
        }
    }
}

如何制作图像预览列表

2 个答案: