Sometimes we are required to upload multiple images in our CakePHP application and at the same time to show them on that page.

Let's see how we can do it.

In our view file like as we have done in post add file of view. In our form of type => file and enctype => multipart/form-data create a input field as :

 echo $this->Form->input('file_path', array('type' => 'file','multiple' => true ,'label' => 'file', 'onchange' => 'readURL(this)', 'class' => 'fileupload', 'name' => 'file_path[]'));

you can check we have given the property to the input field 'multiple' => true, which allows selecting multiple files.

Then, an image tag as,

<img class='imagem_artigo' id="cropbox"/>

Now upto we have created an input browse button in our form in view file and an image tag which will show the selected images from the browse window. Now, to show the images in the image tag include the jQuery script.

The script is given below :

<script language="javascript" type="text/javascript">
$(function () {
    $(".fileupload").change(function () {
        if (typeof (FileReader) != "undefined") {
            var dvPreview = $("#cropbox");
            dvPreview.html("");
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            $($(this)[0].files).each(function () {
                var file = $(this);
                if (regex.test(file[0].name.toLowerCase())) {
                    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(file[0].name + " is not a valid image file.");
                    dvPreview.html("");
                    return false;
                }
            });
        } else {
            alert("This browser does not support HTML5 FileReader.");
        }
    });
});
</script>

Also, include the jQuery library,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Now, access the URL of your application and in the post add a page in the form browse to the images and select them from the upload button.

Afterwards, the images will appear on the front view page in the image tag.