Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.01.2015, 20:30
Аспирант
Отправить личное сообщение для veltony Посмотреть профиль Найти все сообщения от veltony
 
Регистрация: 10.01.2015
Сообщений: 54

Как ограничить for
Добрый день.

Вот нашел скрипт вывода превьюшек:
function handleFileSelect(evt,lista) {

    var files = evt.target.files;
	
for (var i = 0, f; f = files[i]; i++) {

       if (!f.type.match('image.*')) {
        continue;
      };
	  
 var reader = new FileReader();

           reader.onload = (function(theFile) {
        return function(e) {
var div = document.createElement('div');
var newDiv = document.createElement('div');
newDiv.className = 'spdiv';
newDiv.id = 'spandv';

          newDiv.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
							
          document.getElementById(lista).insertBefore(newDiv, null);

        };
       })(f);
  reader.readAsDataURL(f);
 
    }
  }

;

document.getElementById('files').addEventListener('change', function(e){handleFileSelect(e,'lista')}, false);



Подскажите пожалуйста как ограничить количество выводимых превьюшек.
И как при добавлении id в <div> newDiv.id = 'spandv';
добавить номер, чтобы id для каждого <div> был разным.

Спасибо.
С ув.
Ответить с цитированием
  #2 (permalink)  
Старый 31.01.2015, 20:50
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

Сообщение от veltony
как ограничить количество выводимых превьюшек
Например поменять условие для цикла...

Сообщение от veltony
И как при добавлении id в <div> newDiv.id = 'spandv';
добавить номер, чтобы id для каждого <div> был разным.
Например добавить еще один параметр в конструкцию

reader.onload=(function (theFile) {
   ...
})(f);

Например тот же "счетчик" цикла i... Потом просто конкатенировать

newDiv.id = 'spandv' + Inc;
Ответить с цитированием
  #3 (permalink)  
Старый 31.01.2015, 21:03
Аспирант
Отправить личное сообщение для veltony Посмотреть профиль Найти все сообщения от veltony
 
Регистрация: 10.01.2015
Сообщений: 54

А как поменять условие для цикла?
Мне нужно чтобы превьюшки выводились друг за другом.
Вот как здесь:
http://www.html5rocks.com/ru/tutorials/file/dndfiles/
Раздел "Чтение файлов".
Ответить с цитированием
  #4 (permalink)  
Старый 31.01.2015, 21:09
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

Сообщение от veltony
А как поменять условие для цикла?
Смотри в букваре http://javascript.ru/for про [condition]...

Сообщение от veltony
Мне нужно чтобы превьюшки выводились друг за другом.
Вывод не есть создание дом-элементов... И твое желание никак не связано с "ограничением for".
Ответить с цитированием
  #5 (permalink)  
Старый 31.01.2015, 21:20
Аспирант
Отправить личное сообщение для veltony Посмотреть профиль Найти все сообщения от veltony
 
Регистрация: 10.01.2015
Сообщений: 54

А как при добавлении id в <div> newDiv.id = 'spandv';
добавить номер, чтобы id для каждого <div> был разным.

Возможно такое сделать?
Ответить с цитированием
  #6 (permalink)  
Старый 31.01.2015, 21:22
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

Сообщение от veltony
А как при добавлении id в <div> newDiv.id = 'spandv';
добавить номер, чтобы id для каждого <div> был разным.
Так я же уже написал как это сделать...

Сообщение от ksa
Например добавить еще один параметр в конструкцию

reader.onload=(function (theFile) {
   ...
})(f);


Например тот же "счетчик" цикла i... Потом просто конкатенировать

newDiv.id = 'spandv' + Inc;
Т.е. будет нечто такое

reader.onload=(function (theFile,Inc) {
   ...
   newDiv.id = 'spandv' + Inc;
   ...
})(f,i);
Ответить с цитированием
  #7 (permalink)  
Старый 31.01.2015, 21:24
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

veltony, вот только зачем однотипным элементам, да еще и повторяющимся циклично (!), давать ИДшники?

Им может хватить и некоего класса...
Ответить с цитированием
  #8 (permalink)  
Старый 31.01.2015, 21:36
Аспирант
Отправить личное сообщение для veltony Посмотреть профиль Найти все сообщения от veltony
 
Регистрация: 10.01.2015
Сообщений: 54

Хотел сделать ссылку на удаление превьюшки.
Есть такой вариант
newDiv.onclick = function () {
this.parentElement.removeChild(this);
};
Но это при клике на саму превьюшку (весь <div>).
Не совсем понятно для пользователя.
А как вывести за пределы <div> никак не получается.
Ответить с цитированием
  #9 (permalink)  
Старый 31.01.2015, 21:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

Сообщение от veltony
А как вывести за пределы <div> никак не получается.
Если использовать общий класс - можно навесить обработчик на все элементы такого класса.

Пример...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.test {
	width: 100px;
	height: 100px;
	display: inline-block;
	border: 1px solid;
}
</style>
<script type='text/javascript'>
$(function () {
	$('.test').click(function () {
		this.parentNode.removeChild(this);
	});
});
</script>
</head>
<body>
<div class='test'>0</div>
<div class='test'>1</div>
<div class='test'>2</div>
<div class='test'>3</div>
<div class='test'>4</div>
<div class='test'>5</div>
</body>
</html>

Последний раз редактировалось ksa, 31.01.2015 в 22:06.
Ответить с цитированием
  #10 (permalink)  
Старый 31.01.2015, 21:53
Аспирант
Отправить личное сообщение для veltony Посмотреть профиль Найти все сообщения от veltony
 
Регистрация: 10.01.2015
Сообщений: 54

А как это будет выглядеть применительно к исходному коду скрипта?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно реализовать такой функционал? Julian Общие вопросы Javascript 3 16.01.2015 12:34
Как при быстром многократном клике по кнопке обрабатывать только первый клик battrack jQuery 3 22.03.2012 10:47
Как ограничить абсолютное позиционирование верхней границей окна браузера? javascript_pupil (X)HTML/CSS 1 03.03.2012 17:48
Как отловить обратное событие "click" ? jsuse Общие вопросы Javascript 2 18.01.2012 00:16
как реализовать передачу функции в функцию?? czp Общие вопросы Javascript 10 29.11.2011 19:21