Есть скрипт, почему то здесь не срабатывает.
Задача следующая: ограничить количество загружаемых файлов до 10. Выбрали 11, добавляем только 10, 11-ый удаляем. Добавили 3 файла - можно загрузить только 7.
$(document).ready(function() {
$(".add_photo-item").on("click", function() {
$('#js-photo-upload').trigger("click");
});
var maxFileSize = 2 * 1024 * 1024; // (байт) Максимальный размер файла (2мб)
var queue = {};
var imagesList = $('#uploadImagesList');
var itemPreviewTemplate = imagesList.find('.item').clone();
imagesList.find('.item').remove();
$('#js-photo-upload').on('change', function () {
var files = this.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if ( !file.type.match(/image\/(jpeg|jpg|png|gif)/) ) {
alert( 'Фотография должна быть в формате jpg, png или gif' );
continue;
}
if (file.size > maxFileSize) {
alert( 'Размер фотографии не должен превышать 2 Мб' );
continue;
}
preview(files[i]);
}
this.value = '';
});
function preview(file) {
var reader = new FileReader();
reader.addEventListener('load', function(event) {
var img = document.createElement('img');
var itemPreview = itemPreviewTemplate.clone();
itemPreview.find('.img-wrap img').attr('src', event.target.result);
itemPreview.data('id', file.name);
imagesList.append(itemPreview);
queue[file.name] = file;
});
reader.readAsDataURL(file);
}
});
#js-photo-upload {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="add-photo" multiple id="js-photo-upload">
<div class="add_photo-content">
<ul id="uploadImagesList">
<li class="item"><span class="img-wrap"><img src="" alt=""></span><span class="delete-link" title="Удалить">Удалить</span></li>
</ul>
<div class="add_photo-item">+</div>
</div>
.template
где?