ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вывод картинок в цикле загрузки
25 сообщений из 90, страница 1 из 4
  1  все
Вывод картинок в цикле загрузки
    #39346431
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Код: html
1.
2.
3.
<input type="file" id="file" multiple accept="image/jpeg" >
<div id="list_files"></div>
<div id="pic_div" ></div>



Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
document.getElementById('file').addEventListener('change', function (evt) {
                    var n = evt.target.files.length;
                    var a = 0;
                    for (var i = 0; i < n; i++) {
                        var reader = new FileReader();
                        $('#list_files').append('<span data-pic="' + i + '">' + this.files[i].name + ' &nbsp; &nbsp; &nbsp;</span>');
                        reader.onload = function (e) {
                            var pic = new Image();
                            pic.src = e.target.result;
                            $('#pic_div').append('<img class="pic_del" src="pic/del_.png" alt="" data-pic="' + a + '"/><img src="' + pic.src + '" alt="" data-pic="' + (a++) + '"/>');
                            $('#list_files').find('span[data-pic="' + (a - 1) + '"]').css('color', 'red');
                        };
                        reader.readAsDataURL(this.files[i]);
                    }
                }, false);




загрузка множества картинок - 10+
необходимо, что при загрузке очередного файла очередной span с именем менял цвет и сама картинка отображалась.
соответствие имени файла и картинки не обязательно порядок отображения картинок не важен
...
Рейтинг: 0 / 0
13.11.2016, 17:37
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346454
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Хм, вот без лишних append и find, да и вообще без jQuery:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <input accept="image/jpeg" multiple onchange="onChange(this)" type="file">
  <div id="fileNames"></div>
  <div id="fileViews"></div>
  <script>
    var fileNames = document.querySelector('#fileNames'),
        fileViews = document.querySelector('#fileViews');

    function onChange(sender) {
      var i, l = sender.files.length;

      for (i = 0; i < l; i++) {
        previewImage(sender.files[i]);
      }
    }

    function previewImage(file) {
      if (!file) {
        return;
      }

      var fileName, image, reader = new FileReader();
      
      fileName = document.createElement('SPAN');
      fileName.innerHTML = file.name + ' &nbsp; &nbsp; &nbsp;';
      fileNames.appendChild(fileName);

      reader.onload = function() {
        image = new Image();
        image.height = 200;
        image.src = reader.result;
        
        fileName.style.color = 'red';
        fileViews.appendChild(image);
      }

      reader.readAsDataURL(file);
    }
  </script>
</body>
</html>


http://plnkr.co/edit/ovoMAUre1RkPoRlJAcji?p=preview
...
Рейтинг: 0 / 0
13.11.2016, 19:03
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346455
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANA,
ты пробовал загрзить 20 картинок по 2,5м?
тож самое , что и мой вариант
...
Рейтинг: 0 / 0
13.11.2016, 19:11
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346456
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANA,
ты пробовал загрзить 20 картинок по 2,5м?
тож самое , что и мой вариант
Пробовал. И 20, и 30.

В твоём варианте Image зачем-то два раза создаётся:
1. var pic = new Image()
2. <img src="' + pic.src + '" alt="" data-pic="' + (a++) + '"/>
...
Рейтинг: 0 / 0
13.11.2016, 19:16
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346457
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
В IE подглючивает, вот немного доработанный вариант:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
<!DOCTYPE html>
<html>
<head></head>
<body>
  <input accept="image/jpeg" multiple onchange="onChange(this)" type="file">
  <div id="fileNames"></div>
  <div id="fileViews"></div>
  <script>
    var fileNames = document.querySelector('#fileNames'),
      fileViews = document.querySelector('#fileViews');

    function onChange(sender) {
      var i, l = sender.files.length;

      for (i = 0; i < l; i++) {
        previewImage(sender.files[i]);
      }
    }

    function previewImage(file) {
      if (!file) {
        return;
      }

      var fileName;

      fileName = document.createElement('SPAN');
      fileName.innerHTML = file.name + ' &nbsp; &nbsp; &nbsp;';
      fileNames.appendChild(fileName);

      setTimeout(function() {
        var image, reader;
        
        reader = new FileReader();
        reader.onload = function() {
          image = new Image();
          image.height = 200;
          image.src = reader.result;

          fileName.style.color = 'red';
          fileViews.appendChild(image);
        }
        reader.readAsDataURL(file);
      }, 0);
    }
  </script>
</body>
</html>


http://plnkr.co/edit/b7vPFLv6cQVJZTM8ksbB?p=preview
...
Рейтинг: 0 / 0
13.11.2016, 19:23
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346458
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANAвадяskyANA,
ты пробовал загрзить 20 картинок по 2,5м?
тож самое , что и мой вариант
Пробовал. И 20, и 30.

В твоём варианте Image зачем-то два раза создаётся:
1. var pic = new Image()
2. <img src="' + pic.src + '" alt="" data-pic="' + (a++) + '"/>
там дальше используется...это просто выдранный кусок
проблема не в соответствии имен и картинок (это у тебя вроде соответствует, возможно пригодится)
а в том, что появлеие картинок должно быть постепенным, по одной, т.е. появление - это прогрессбар.
...
Рейтинг: 0 / 0
13.11.2016, 19:28
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346460
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANAпропущено...

Пробовал. И 20, и 30.

В твоём варианте Image зачем-то два раза создаётся:
1. var pic = new Image()
2. <img src="' + pic.src + '" alt="" data-pic="' + (a++) + '"/>
там дальше используется...это просто выдранный кусок
проблема не в соответствии имен и картинок (это у тебя вроде соответствует, возможно пригодится)
а в том, что появлеие картинок должно быть постепенным, по одной, т.е. появление - это прогрессбар.
Хм, а что сразу не написал? Я же просил: 19888206
...
Рейтинг: 0 / 0
13.11.2016, 19:32
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346462
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
[quot skyANA]вадяпропущено...

Хм, а что сразу не написал? Я же просил: 19888206

авторнеобходимо, что при загрузке очередного файла очередной span с именем менял цвет и сама картинка отображалась.
19888274
вроде как сразу написал
...
Рейтинг: 0 / 0
13.11.2016, 19:35
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346464
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANAпропущено...

Пробовал. И 20, и 30.

В твоём варианте Image зачем-то два раза создаётся:
1. var pic = new Image()
2. <img src="' + pic.src + '" alt="" data-pic="' + (a++) + '"/>
там дальше используется...это просто выдранный кусок
Что используется? У тебя два HtmlImageElement-а создаётся для отображения одной картинки. Зачем?
...
Рейтинг: 0 / 0
13.11.2016, 19:39
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346465
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
[quote вадя]skyANAвадяпропущено...

Хм, а что сразу не написал? Я же просил: 19888206

авторнеобходимо, что при загрузке очередного файла очередной span с именем менял цвет и сама картинка отображалась.
19888274
вроде как сразу написал
Хм, "появлеие картинок должно быть постепенным, по одной , т.е. появление - это прогрессбар" для меня означает, что сначала одну загрузили и она появилась, пошли загружать другую...
Как яблоки из мешка по одному доставать.
...
Рейтинг: 0 / 0
13.11.2016, 19:42
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346466
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
То есть вот так:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
<!DOCTYPE html>
<html>
<head></head>
<body>
  <input accept="image/jpeg" multiple onchange="onChange(this)" type="file">
  <div id="fileNames"></div>
  <div id="fileViews"></div>
  <script>
    var fileNames = document.querySelector('#fileNames'),
      fileViews = document.querySelector('#fileViews');

    function onChange(sender) {
      previewAll(sender.files);
    }

    function previewAll(files) {
      var i, l = files.length;
      
      previewImage(0);
      
      function previewImage(i) {
        var file = files[i], fileName;

        fileName = document.createElement('SPAN');
        fileName.innerHTML = file.name + ' &nbsp; &nbsp; &nbsp;';
        fileNames.appendChild(fileName);

        setTimeout(function() {
          var image, reader;

          reader = new FileReader();
          reader.onloadend = function() {
            image = new Image();
            image.height = 200;
            image.src = reader.result;

            fileName.style.color = 'red';
            fileViews.appendChild(image);
            
            i = i + 1;
            
            if (i < l) {
              previewImage(i);
            }
          }
          reader.readAsDataURL(file);
        }, 0);
      }
    }
  </script>
</body>
</html>


http://plnkr.co/edit/jFLG5a6kZhgbHxmlJrfy?p=preview
...
Рейтинг: 0 / 0
13.11.2016, 19:50
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346469
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
авторХм, "появлеие картинок должно быть постепенным, по одной, т.е. появление - это прогрессбар" для меня означает, что сначала одну загрузили и она появилась, пошли загружать другую...
Как яблоки из мешка по одному доставать.
да.
если

Код: javascript
1.
2.
3.
 fileName.style.color = 'red';
        fileViews.appendChild(image);
console.log('ddddddddddddddddd');


то ddddddddddddddddd бедет выводиться последовательно
...
Рейтинг: 0 / 0
13.11.2016, 20:01
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346472
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANA,
вот за это - спасибо.
...
Рейтинг: 0 / 0
13.11.2016, 20:12
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346473
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
а точно Париж - столица Франции?
...
Рейтинг: 0 / 0
13.11.2016, 20:13
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346474
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANA,

очень заметна разница между хромом и мозиллой раз в 5 хром быстрее
...
Рейтинг: 0 / 0
13.11.2016, 20:17
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346476
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяавторХм, "появлеие картинок должно быть постепенным, по одной, т.е. появление - это прогрессбар" для меня означает, что сначала одну загрузили и она появилась, пошли загружать другую...
Как яблоки из мешка по одному доставать.
да.
если

Код: javascript
1.
2.
3.
 fileName.style.color = 'red';
        fileViews.appendChild(image);
console.log('ddddddddddddddddd');



то ddddddddddddddddd бедет выводиться последовательно
Хм... Рассказать про event loop и асинхронные операции?
...
Рейтинг: 0 / 0
13.11.2016, 20:21
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346477
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Изопропила точно Париж - столица Франции?
это к чему?
...
Рейтинг: 0 / 0
13.11.2016, 20:21
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346478
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANA,
вот за это - спасибо.Да не за что. Было бы хорошо, если бы ты точнее проблему описывал, быстрее бы получил решение.
...
Рейтинг: 0 / 0
13.11.2016, 20:31
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346480
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANA,

очень заметна разница между хромом и мозиллой раз в 5 хром быстрееХм, попробуй Worker + FileReaderSync.
...
Рейтинг: 0 / 0
13.11.2016, 20:32
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346482
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
авторХм... Рассказать про event loop и асинхронные операции?

вопрос в том что надо ставить в очередь и когда.
в моём варианте console.log выводило как файл загружался и прописывался в дом.
но это не вызывало отображение файла. это же и в твоих первых вариантах.
т.е. поток выполнения js блокирует отображение.
...
Рейтинг: 0 / 0
13.11.2016, 20:37
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346483
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
авторХм, попробуй Worker + FileReaderSync.
если только на досуге.
для меня основной - хром , ff -запасной для win xp,
всё остальное лесом...
...
Рейтинг: 0 / 0
13.11.2016, 20:40
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346492
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяавторХм... Рассказать про event loop и асинхронные операции?

вопрос в том что надо ставить в очередь и когда.
в моём варианте console.log выводило как файл загружался и прописывался в дом.
но это не вызывало отображение файла. это же и в твоих первых вариантах.
т.е. поток выполнения js блокирует отображение.
Нормально спроси, что тебе не понятно? Поток выполнения js блокирует отображение - это глупость какая-то.
...
Рейтинг: 0 / 0
13.11.2016, 21:28
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346504
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
skyANA ! за идею отдельное спасибо.
но только можно и без setTimeout.

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
               document.getElementById('file').addEventListener('change', function (evt) {
                    var n = evt.target.files.length;
                    var a = 0;

                    vvv(this.files[a], a);

                    function vvv(file, i) {

                        var reader = new FileReader();
                        $('#list_files').append('<span data-pic="' + i + '">' + file.name + ' &nbsp; &nbsp; &nbsp;</span>');
                        reader.onload = function (e) {

                            $('#pic_div').append('<img class="pic_del" src="pic/del_.png" alt="" data-pic="' + a + '"/><img src="' + e.target.result + '" alt="" data-pic="' + i + '"/>');
                            $('#list_files').find('span[data-pic="' + i + '"]').css('color', 'red');
                            if (a++ < (n - 1)) {
                                vvv(evt.target.files[a], a);
                            }
                        };
                        reader.readAsDataURL(file);
                    }

                }, false);
...
Рейтинг: 0 / 0
13.11.2016, 22:06
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346509
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяskyANA ! за идею отдельное спасибо.
но только можно и без setTimeout.setTimeout я для IE впиндюрил: 19888451 .
...
Рейтинг: 0 / 0
13.11.2016, 22:19
| Ответить | Цитировать | Написать  
Вывод картинок в цикле загрузки
    #39346512
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
вадяавторХм, попробуй Worker + FileReaderSync.
если только на досуге.
для меня основной - хром , ff -запасной для win xp,
всё остальное лесом...
А чего там пробовать-то?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
<!DOCTYPE html>
<html>
<head></head>
<body>
  <input accept="image/jpeg" multiple onchange="onChange(this)" type="file">
  <div id="files"></div>
  <script>
    var files = document.querySelector('#files'),
        fileWorker = new Worker('worker.js'),
        urlFactory = window.URL || window.webkitURL;

    function onChange(sender) {
      fileWorker.postMessage(sender.files);
    }

    fileWorker.onmessage = function(e) {
      var image = new Image(),
          imageBlob = new Blob([e.data], { type: "image/jpeg" });

      image.height = 200;
      image.src = urlFactory.createObjectURL(imageBlob);
      files.appendChild(image);
    }
  </script>
</body>
</html>


worker.js
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
self.addEventListener('message', function(e) {
  var fileReader = new FileReaderSync(),
      files = e.data, i, l = files.length;

  for (i = 0; i < l; i++) {
    postMessage(fileReader.readAsArrayBuffer(files[i]));
  }
}, false);


http://plnkr.co/edit/buYazmlUSzvx8gu5zEGD?p=preview
...
Рейтинг: 0 / 0
13.11.2016, 22:23
| Ответить | Цитировать | Написать  
25 сообщений из 90, страница 1 из 4
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вывод картинок в цикле загрузки
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]