Preview Multiple Images Before Upload Using JavaScript in Oracle APEX

In this Oracle APEX Tutorial, We will explore the Preview Multiple Images Before Upload Using JavaScript in Oracle APEX.

You may also like Preview Image Before Uploading in Oracle APEX.

To Preview Multiple Images Before Upload using JavaScript in Oracle APEX

Step 1:- Create a Region with file Browse Page Item. See the below screenshot for the better understanding.

Step 2:- Create one more Region for Preview Images using below HTML code. See the below screenshot for the better understanding.

Step 3:- Use the below JavaScript code in the page function and Global Variable Declaration Section.

window.onload = function () {
    var fileUpload = document.getElementById("P33_UPLOAD");
    fileUpload.onchange = function () {
        if (typeof (FileReader) != "undefined") {
            var dvPreview = document.getElementById("image_preview");
            dvPreview.innerHTML = "";
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            for (var i = 0;i<fileUpload.files.length; i++) {
                var file = fileUpload.files[i];
                if (regex.test(file.name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = document.createElement("IMG");
                        img.height = "100";
                        img.width = "100";
                        img.src = e.target.result;
                        dvPreview.appendChild(img);
                    }
                    reader.readAsDataURL(file);
                } else {
                    alert(file.name + " is not a valid image file.");
                    dvPreview.innerHTML = "";
                    return false;
                }
            }
        } else {
            alert("This browser does not support HTML5 FileReader.");
        }
    }
};

Step 4:- Use below CSS code in the page inline section which added the space between the two or more images. 

#image_preview img
{
    display: inline-block;
    margin: 0px 10px;
}

That's all for today, I hope this (Preview Multiple Images Before Upload Using JavaScript in Oracle APEX) post will be helpful for you. If you like the post then share your view in the comment box.

DEMO URL

Reference URL