0

I have a file that already uploaded to the server using input type="file" (PHP), my question is, how can I preview the image before I download it. I think of to put a preview button at each of download file name link. Onclick on the preview button, it will popup and show the image.

Does anyone know the coding for preview image? Thanks

user2699175
  • 629
  • 1
  • 8
  • 15

1 Answers1

0

You can use some javascript/jQuery:

    function readURL(input) {
        if (input.files) {
            for (var i = 0; i < input.files.length; i++) {
                if(input.files[i]) {
                    preview(input, i);  
                }
            }   
        }
    } 

function preview(input, i) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#divID').html('<img src="'+e.target.result+'" alt="Image currently not accessible" />');
    };

    reader.readAsDataURL(input.files[i]);
}

    $('input[type=file]').on('change', function() {
        readURL(this);
    });

and for the HTML part:

<div id="divID"></div>

Note that this uses quite a bit of resources with large images.

Cyrille Armanger
  • 643
  • 5
  • 18
  • thank you for sharing, will try it later.. – user2699175 Nov 15 '13 at 01:55
  • hi, just wonder which part of your coding called the images path and file name?Is it `e.target.result` ? – user2699175 Nov 15 '13 at 02:02
  • Hello, Yes, e.target.result corresponds to the image source. We use the readURL function to get the right input file and also because this function is made to handle multiple files at once. Technically you could associate readURL and preview, what is important is the FileReader part. – Cyrille Armanger Nov 15 '13 at 02:08