javascript - 在嵌入链接中显示上传的 PDF

Question

我正在尝试上传和预览 pdf 文档，这里是我的代码:

HTML

<div>
   <input name="file" type="file" id="btnupload" />
   <input type="button" value="Preview" id="btnPrvw"  />
</div>
<embed width="575" height="500" id="embdLink"/>

jquery

$(document).ready(function () {
   var filename;
   $('#btnupload').change(function () {
      if (this.files[0].name != "") {
          filename = $('#btnupload').val();
      }
   });
   $('#btnPrvw').click(function () {                  
      $('#embdLink').data = filename;
   });
});

但它没有显示任何内容，做错了什么？期待很好的建议。

Answer 1

尝试利用 .files object 、 Blob 、 URL.createObjectURL() ，选择 DOM 元素 [0] 属性 src 位于 $('#embdLink')[0].src

html

<embed width="100%" height="100%" name="plugin" id="embdLink" />

js

$(document).ready(function() {
  var filename;
  $('#btnupload').change(function() {
    if (this.files[0].name != "") {
      filename = this.files[0]
    }
  });
  $('#btnPrvw').click(function() {
    $('#embdLink')[0].src = window.URL.createObjectURL(new Blob([filename], {"type":"application/pdf"}));
  });
});