更改事件时的iframe pdf预览

Question

$(document).ready(function(){

  $("#id_quotationFile").change(function(){

    url=$("#id_quotationFile").attr(value);
    $("#pdf-view").attr("src",url);
    
  });
});

尝试使用上面的jquery代码加载在输入字段中浏览的pdf文件，但不起作用

<input type=file id="id_quotationFile">
           

<iframe src="" id="pdf-view" frameborder="0px" title="Preview"></iframe>

如何在iframe中预览pdf文件。

Answer 1

正如这个问题中提到的，尝试强制您的iframe重新加载：

document.getElementById('some_frame_id').contentWindow.location.reload()；

What’s the best way to reload / refresh an iframe?

在您的情况下，它将是：

$("#pdf-view").contentWindow.location.reload();

Answer 2

请考虑以下内容。

​

$(function() {
  function readURL(input, target) {
    input = $(input).get(0);
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $(target).attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
      $(".details").html("Preview: '" + input.files[0].name + "' Type: " + input.files[0].type);
    }
  }

  $("#fileUpload").click(function() {
    $("#id_quotationFile").trigger("click");
  });
  $("#id_quotationFile").change(function() {
    readURL(this, $("#pdf-view"));
  });
});

input {
  display: none;
}

button {
  padding: 0.2em 0.4em;
  margin: 0.2em;
}

iframe {
  width: 95%;
  height: 840px;
}

.details {
font-family: Arial, Monospace;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="fileUpload">Browse...</button>
<input type=file id="id_quotationFile">
<span class="details">&nbsp;</span>
<iframe src="" id="pdf-view" frameborder="0px" title="Preview"></iframe>

​

参考：Preview an image before it is uploaded

您需要将本地文件转换为新的FileReader。因此，我们读取文件，将其转换为Base64，当它准备就绪时，将其加载到目标中。