在嵌入式链接中显示上传的 PDF答案

【问题标题】：Display uploaded PDF in embedded link在嵌入式链接中显示上传的 PDF
【发布时间】：2015-11-17 12:04:00
【问题描述】：

我正在尝试上传和预览一个 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;
   });
});

但它没有显示任何内容，是哪里出错了？期待很好的建议。

【问题讨论】：

标签： javascript jquery html pdf

【解决方案1】：

尝试使用.files对象，Blob，URL.createObjectURL()，选择DOM元素[0]属性src$('#embdLink')[0].src

html

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

$(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"}));
  });
});

【讨论】：

【解决方案2】：

最后我通过应用以下脚本解决了这个问题。感谢那些在这个问题上工作的人：这是解决方案：

 <script>
        var srcContent;
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    srcContent=  e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
            }
        }       
        $(document).ready(function () {        
            $("#inputFile").change(function () {
                if (this.files[0].name != "") {
                    readURL(this);                  
                }                    
            });    
            $('#btnPrvw').click(function () {              
                $('#embdLink').attr('src', srcContent);
            });
        });
    </script>

【讨论】：