Как ограничить 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> был разным. Спасибо. С ув. |
Цитата:
Цитата:
reader.onload=(function (theFile) {
...
})(f);
Например тот же "счетчик" цикла i... Потом просто конкатенировать newDiv.id = 'spandv' + Inc; |
А как поменять условие для цикла?
Мне нужно чтобы превьюшки выводились друг за другом. Вот как здесь: http://www.html5rocks.com/ru/tutorials/file/dndfiles/ Раздел "Чтение файлов". |
Цитата:
Цитата:
|
А как при добавлении id в <div> newDiv.id = 'spandv';
добавить номер, чтобы id для каждого <div> был разным. Возможно такое сделать? |
Цитата:
Цитата:
reader.onload=(function (theFile,Inc) {
...
newDiv.id = 'spandv' + Inc;
...
})(f,i);
|
veltony, вот только зачем однотипным элементам, да еще и повторяющимся циклично (!), давать ИДшники?
Им может хватить и некоего класса... |
Хотел сделать ссылку на удаление превьюшки.
Есть такой вариант newDiv.onclick = function () { this.parentElement.removeChild(this); }; Но это при клике на саму превьюшку (весь <div>). Не совсем понятно для пользователя. А как вывести за пределы <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>
|
А как это будет выглядеть применительно к исходному коду скрипта?
|
| Часовой пояс GMT +3, время: 13:58. |