Рассматривается организация множественной загрузки файлов изображений с предпросмотром, используя JQuery и HTML5 File API.
HTML:
<input id="input_upload_file" type="file" name="files[]" multiple>
JQuery:
Обработчик выбора файлов:
$('#input_upload_file').change(function() {
displayFiles(this.files);
});
После выбора изображения должны отображаться списком в блоке user_img_file:
$('<ul id="img-list_file"></ul>').appendTo('#user_img_file');
Функция формирования списка изображений:
function displayFiles(files) {
var imgList = $('ul#img-list_file');
$.each(files, function(i, file) {
if (!file.type.match(/image.*/)) {
return true;
}
var li = $('<li/>').appendTo(imgList);
var id_img=file.name.replace(/[\.,\:,\/, ,\(,\),=,?,-]/g,"");
Формируем элемент списка, содержащий имя файла, кнопку удаления изображения из списка, размер файла изображения и само изображение:
$('<div/>').text(file.name).appendTo(li).append('<img id="btn_remove_img_'+id_img+'" src="/img/btn_remove_img.jpg" alt="" class="btn">');
$('#btn_remove_img_'+id_img).click(function() {
var parent=$(this).parent().parent();
parent.remove();
});
$('<div/>').text(file.size+' байт').appendTo(li);
var img = $('<img/>').appendTo(li);
li.get(0).file = file;
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.attr('src', e.target.result);
aImg.attr('width', 220);
};
})(img);
reader.readAsDataURL(file);
});
}
