Estoy tratando de mostrar la vista previa de la imagen antes de que se cargue. Sin embargo, para algunas imágenes se muestra la vista previa, mientras que para otras muestra una imagen rota. lo único que puedo averiguar es que las dos imágenes difieren en su interpretación fotométrica. Las imágenes cuya vista previa no aparece tienen una Interpretación fotométrica como RGB, mientras que las imágenes cuya vista previa aparece tienen un espacio en blanco en su propiedad de Interpretación fotométrica. Mi código es el siguiente:

 <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>

No soy capaz de resolver el problema. ¿Necesito convertir mis imágenes a otros formatos? Por favor, ayuda. Como se muestra en la vista previa de la foto de la imagen del medio, no aparece. Esta imagen tiene interpretación fotométrica como RGB