javascript - 上传前预览 PDF/图像文件

Question

无论如何，pdf/image文件可以在上传之前在iframe中自动预览/显示而无需点击预览按钮？

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

你有一个输入，检查 onChange 然后做一个

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

创建 URL: 然后用它来预览嵌入

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

在这里阅读更多 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed