Preview PDF/Image file before upload

Question

Is there anyway where pdf/image file can auto preview/shown in iframe before uploading without need click on preview button?

function PreviewImage() {
    pdffile=document.getElementById("uploadPDF").files[0];
    pdffile_url=URL.createObjectURL(pdffile);
    $('#viewer').attr('src',pdffile_url);
}

<form name=f1 method=post enctype="multipart/form-data">
    <input id="uploadPDF" type="file" name="file"/>&nbsp;
    <input type="button" value="Preview" onclick="PreviewImage();" />

    <div style="clear:both">
       <iframe id="viewer" frameborder="0" scrolling="no" width="300" height="200"></iframe>
    </div>
    <button type="submit" name="submit" class="btn btn-success btn-sm">
      <i class="fa fa-dot-circle-o"></i> Add
    </button>&emsp;
</form>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Answer 1

You have an input, check the onChange and then make a

 src= URL.createObjectURL(event.target.files[0])

to create URL: and then use it to preview with embed

<embed  
       src=src
       width="250"
       height="200">

Read more here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed