I am trying to show the preview of image before it is uploaded. However for some images the preview is shown while for others it shows a broken image. the only thing i can find out is the two images differ in their Photometric Interpretation. The images whose preview is not coming up have a Photometric Interpretation as RGB while for images whose preview is coming up have blank in their Photometric Interpretation property. My code is as below:

        <form method="post" action="" id="imageupload" enctype="multipart/form-data" name="imageuploadForm">
            <input type="file"  class="custominputfile" name="defectimagefile[]" multiple 
                id="defectimagefile" data-multiple-caption="{count} files selected" onchange="preview_image();"/>
            <label for="defectimagefile" ><span class="glyphicon glyphicon-upload">&nbsp; </span>Select File</label>
            
            <script> function preview_image(){
                        var total_file=document.getElementById("defectimagefile").files.length;
                        for(var i=0;i<total_file;i++){
                            url=URL.createObjectURL(event.target.files[i]);
                            $('#imgGallery').append("<img width='100' height='80' src='" + url+"'>");
                            document.getElementById("noofimgselected").innerHTML=total_file +  "  File(s) selected"
                        }
            </script>
        </form>
        
        <div id="imgGallery"></div>

Iam not able to solve the issue. Do i need to convert my images into some other formats?Please help.As shown in the photo preview of middle image in not coming up. This image has photometric interpretation as RGB