Во время загрузки изображения выберите изображения из другой папки и просмотрите все изображения перед загрузкой и загрузите все изображения

Question

Я делаю загрузку нескольких изображений с помощью php-Codeigniter. При выборе нескольких изображений я хочу выбрать изображения из нескольких папок и просмотреть их перед отправкой формы и отправить все предварительно просмотренные изображения.

Я использовал jquery для предварительного просмотра выбранных изображений. Но когда я выбираю другое изображение, старое изображение предварительного просмотра исчезает, и я не могу выбрать несколько изображений из разных папок и не могу загрузить все изображения предварительного просмотра. Кроме того, после загрузки загружаются только последние выбранные изображения.

JQuery:

$(function () {
    $("#fileupload").change(function () {
        if (typeof (FileReader) != "undefined") {
            var dvPreview = $("#dvPreview");
            dvPreview.html("");
            $($(this)[0].files).each(function () {
                var file = $(this);
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = $("<img />");
                    img.attr("style", "height:100px;width: 100px");
                    img.attr("src", e.target.result);
                    dvPreview.append(img);
                }
                reader.readAsDataURL(file[0]);
            });
        } else {
           alert("This browser does not support HTML5 FileReader.");
        }
    });
});

вид:

Я ожидаю выбрать несколько изображений из разных папок и просмотреть их, а пользователь может удалить изображения, если пользователь не хочет загружать их, а затем загрузить все предварительно просмотренные изображения.