Форум

deatlink · #1 (**permalink**) 08.09.2017, 18:25

Здравствуйте, не могу понять почему когда я загружаю к примеру 3 картинки (через Multiple), то в превью они отображаются не по порядку как я выбрал. Т.е. 2,1,3

Как можно сделать чтобы отображались по порядку то что я выбрал через CTR ? (1,2,3)

$(function() {

    var imagesPreview = function(input, placeToInsertImagePreview) {
	
        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
			var hrava = Math.random();
                    $($.parseHTML('........')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);

                }
    reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

рони · #2 (**permalink**) 08.09.2017, 18:54

deatlink,
onload -- работает асинхронно -- когда картинка загрузится

deatlink · #3 (**permalink**) 08.09.2017, 19:03

хотя я вижу что если через CTR выбираю первую, потом вторую, то мною выбранная вторая получается первой...

deatlink · #4 (**permalink**) 08.09.2017, 19:06

т.е выбираю через ctr la.png, ka.png, ca.png

то в строке

"ca.png" "ka.png" "la.png"

по этому мною выбранную первую la.png отображает последней.

Можно как то вывести с конца? т.е. первую мною выбранную

рони · #5 (**permalink**) 08.09.2017, 19:16

deatlink,

deatlink · #6 (**permalink**) 08.09.2017, 19:22

понял что вы написали, onload отобразит картинки которые загрузились. Как сделать чтобы отобразить результат после того как все картинки загрузились?

рони · #7 (**permalink**) 08.09.2017, 19:55

deatlink,
в onload заполнять массив картинками и проверять его длину если arr.length== numer то ...

deatlink · #8 (**permalink**) 08.09.2017, 19:57

я в этом очень слаб, не могли бы помочь это сделать?

рони · #9 (**permalink**) 08.09.2017, 22:53

deatlink,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css"> .gallery img{
    height: 100px;
    width: auto;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var imagesPreview = function(input, placeToInsertImagePreview) {
        var count = 0;
        var arr = [].map.call(input.files, function(src, i) {
            count = i + 1;
            var reader = new FileReader;
            reader.onload = function(event) {
                arr[i] = event.target.result;
                count--;
                if (!count) arr.forEach(function(src) {
                    $("<img>", {
                        src: src
                    }).prependTo(placeToInsertImagePreview)
                })
            };
            reader.readAsDataURL(src);
            return reader
        })
    };
    $("#gallery-photo-add").on("change", function() {
        imagesPreview(this, "div.gallery")
    })
});
  </script>
</head>

<body>
<div class="gallery"></div>
<input id="gallery-photo-add" name="" type="file" multiple="">
</body>
</html>

deatlink · #10 (**permalink**) 08.09.2017, 23:58

когда выбираю в окне первый файл, а потом другие то первый в конец выводится(

Форум

Справочник

Discord чат

Курсы javascript