Click here to Skip to main content
15,566,394 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello
I want the previous files not to be deleted after several selections (Input type=file multiple - add files sequentially), and to limit the number and preview the images.
How can I combine the two codes?

What I have tried:

code1
JavaScript
function handler() {
    let inputs = $('.file-input'), a = [];
    for (let i = 0; i < inputs.length; ++i) {
        a = a.concat([].map.call(inputs[i].files, function(a) { return a.name }))
    }
    alert("Files selected so far:\n" + a.join('\n'))

    let input = document.createElement('input');
    input.type = "file";
    input.onchange = handler;
    input.className = "file-input";
    input.multiple = "multiple";

    this.parentNode.insertBefore(input, this);
    this.style.display = 'none';
}

document.getElementById('input').onchange = handler;

code2
HTML
<div class="upload__box">
<div class="upload__img-wrap"></div>
</div>
JavaScript
jQuery(document).ready(function () {
    ImgUpload();
});

function ImgUpload() {
    let imgWrap = "";
    let imgArray = [];

    $('.upload__inputFile').each(function () {
        $(this).on('change', function (e) {
            imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
            let maxLength = $(this).attr('data-max_length');

            let files = e.target.files;
            let filesArr = Array.prototype.slice.call(files);
            let iterator = 0;
            filesArr.forEach(function (f, index) {

                if (!f.type.match('image.*')) {
                    return;
                }

                if (imgArray.length > maxLength) {
                    return false
                } else {
                    let len = 0;
                    for (let i = 0; i < imgArray.length; i++) {
                        if (imgArray[i] !== undefined) {
                            len++;
                        }
                    }
                    if (len > maxLength) {
                        return false;
                    } else {
                        imgArray.push(f);

                        let reader = new FileReader();
                        reader.onload = function (e) {
                            let html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close'></div></div></div>";
                            imgWrap.append(html);
                            iterator++;
                        };
                        reader.readAsDataURL(f);
                    }
                }
            });
        });
    });

    $('body').on('click', ".upload__img-close", function (e) {
        let file = $(this).parent().data("file");
        for (let i = 0; i < imgArray.length; i++) {
            if (imgArray[i].name === file) {
                imgArray.splice(i, 1);
                break;
            }
        }
        $(this).parent().parent().remove();
    });
}

$(".remove").click(function(){
    $(this).parent(".pip").remove();
});
Posted
Updated 4-Nov-22 4:38am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900