T.M. SoftStudio

feci quod potui, faciant meliora potentes

Загрузка изображений на сервер с предпросмотром с FileReader

Рассматривается организация множественной загрузки файлов изображений с предпросмотром, используя 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);

});

}