Как сделать multiple загрузку изображений с их предварительным просмотром?

Question

[Ilya Bobkov]

Привет! Помогите разобраться с вопросом.

Answer 1

[Alexander Litvinenko]

$( input).change( function(){   
    this.files  //массив с файлами
    .....
    var reader = new FileReader();
    reader.onload = function ( e) {
        ......
        var src = e.target.result; //тут сама картинка для превъю
    }
    .....
    reader.readAsDataURL( this.files[ idx]); //индекс файла в массиве, перебираем все по очереди
})

В детали не вдавался, сами разберетесь

Comments

[Ilya Bobkov]

Я сделал так, но перебор не срабатывает, не подскажите почему?

// ---------------------
// загрузка картинок
// ---------------------
function readURL(input)
{
if (input.files && input.files[0])
{
var reader = new FileReader();
var list = document.getElementById('file');

$('#photo_block').empty();

reader.onload = function(e)
{
$('#photo_block').append( "");
}

for (var x = 0; x < 5; x++)
reader.readAsDataURL(input.files[x]);
}
}
// -----------------
// загрузка фото
// -----------------
$('#file').on('change', function()
{
if (photo_count == 5)
swal("ВНИМАНИЕ!", "не больше 5 фото", "warning");
else
readURL(this);
});

[Alexander Litvinenko]

Илья Бобков: $('#photo_block').append( ""); - нечего вставлять

[Alexander Litvinenko]

Илья Бобков: а тут reader.readAsDataURL(input.files[x]); попробуйте включить в цикл и var reader = new FileReader(); в том числе

[Ilya Bobkov]

Alexander Litvinenko: без изменений

[Ilya Bobkov]

Alexander Litvinenko: это здесь на сайте что-то урезается. у меня всё есть.

[Alexander Litvinenko]

Илья Бобков: пробуйте, должно работать.