-1

I am trying to create a PHP file uploader with file preview before uploading. The script below works on multiple file upload for images only but would like to have an image icon for non-images with an image in the directory saying: "File preview not available."

// JavaScript Document
$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
            else{
                $($.parseHTML('<img>')).attr('src', '/assets/img/no_preview.png');

         $('.imagepreview').attr('src', '../img/no_preview.png');
            }
        }

    };

    $('#prescription-photo-add').on('change', function() {
        imagesPreview(this, 'div.prescription');
    });
});
wp78de
  • 16,078
  • 6
  • 34
  • 56
Kenmei
  • 9
  • 4

1 Answers1

0

You can first check the file extension first. Then display the image of the file if it is an image and display "File preview not available." otherwise

Codes can be found in this answer

chingcm
  • 121
  • 4