Как сделать список предпросмотра изображения

Question

Как сделать список предпросмотра изображения

0

У меня есть следующий код для предварительного просмотра изображения

$("#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]);
    }
}

этот код отображает только одно изображение за раз. Как я могу отобразить несколько изображений. например, файл содержит 4 файла.

Saurabh Kumar 23 фев. 2014, в 11:24

Источник

0

Вы можете указать, где вы хотите «отобразить несколько изображений». Возможно, в том же контейнере .weeklyPreview.
Alexander 23 фев. 2014, в 10:01

Теги:

javascript

jquery

2 ответа

0

Может быть, что-то вроде этого:

$("#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;
            }
        }
    }
}

Goran.it 23 фев. 2014, в 07:27

0

Пункт «else» не нужен
Alexander 23 фев. 2014, в 10:15
0

иначе это просто оптимизация, так что цикл завершается, если у нас есть только 2 файла, например ..
Goran.it 23 фев. 2014, в 10:23
0

Я думаю, что вы можете не знать, если есть только 2 файла
Alexander 23 фев. 2014, в 10:31

Показать ещё 1 комментарий

Ещё вопросы

Вы можете указать, где вы хотите «отобразить несколько изображений». Возможно, в том же контейнере .weeklyPreview.
иначе это просто оптимизация, так что цикл завершается, если у нас есть только 2 файла, например ..
Я думаю, что вы можете не знать, если есть только 2 файла

LarsEngeln · Accepted Answer · 2014-02-23T08-09-00.000Z

вы показываете только "0" → 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]);
            }
        }
}