Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вывод картинок в цикле загрузки / 25 сообщений из 90, страница 1 из 4
  1  все
13.11.2016, 17:37
    #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, 19:03
    #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:11
    #39346455
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вывод картинок в цикле загрузки
skyANA,
ты пробовал загрзить 20 картинок по 2,5м?
тож самое , что и мой вариант
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 19:16
    #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:23
    #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:28
    #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:32
    #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:35
    #39346462
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вывод картинок в цикле загрузки
[quot skyANA]вадяпропущено...

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

авторнеобходимо, что при загрузке очередного файла очередной span с именем менял цвет и сама картинка отображалась.
19888274
вроде как сразу написал
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 19:39
    #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:42
    #39346465
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вывод картинок в цикле загрузки
[quote вадя]skyANAвадяпропущено...

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

авторнеобходимо, что при загрузке очередного файла очередной span с именем менял цвет и сама картинка отображалась.
19888274
вроде как сразу написал
Хм, "появлеие картинок должно быть постепенным, по одной , т.е. появление - это прогрессбар" для меня означает, что сначала одну загрузили и она появилась, пошли загружать другую...
Как яблоки из мешка по одному доставать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 19:50
    #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, 20:01
    #39346469
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вывод картинок в цикле загрузки
авторХм, "появлеие картинок должно быть постепенным, по одной, т.е. появление - это прогрессбар" для меня означает, что сначала одну загрузили и она появилась, пошли загружать другую...
Как яблоки из мешка по одному доставать.
да.
если

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


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

очень заметна разница между хромом и мозиллой раз в 5 хром быстрее
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 20:21
    #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:31
    #39346478
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вывод картинок в цикле загрузки
вадяskyANA,
вот за это - спасибо.Да не за что. Было бы хорошо, если бы ты точнее проблему описывал, быстрее бы получил решение.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 20:32
    #39346480
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вывод картинок в цикле загрузки
вадяskyANA,

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

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

вопрос в том что надо ставить в очередь и когда.
в моём варианте console.log выводило как файл загружался и прописывался в дом.
но это не вызывало отображение файла. это же и в твоих первых вариантах.
т.е. поток выполнения js блокирует отображение.
Нормально спроси, что тебе не понятно? Поток выполнения js блокирует отображение - это глупость какая-то.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 22:06
    #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:19
    #39346509
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вывод картинок в цикле загрузки
вадяskyANA ! за идею отдельное спасибо.
но только можно и без setTimeout.setTimeout я для IE впиндюрил: 19888451 .
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2016, 22:23
    #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
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вывод картинок в цикле загрузки / 25 сообщений из 90, страница 1 из 4
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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