Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to browse and show multiple images at the same time in cakephp?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 787
    Comment on it

    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.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: