上传PDF并显示在同一页面

Question

我对 HTML/JS 的了解非常有限。 我需要上传文件进行一些修改并在同一页面上显示文件。

我的代码看起来像这样。

<form class="form-inline" method="POST" enctype="multipart/form-data" action="getFilledPdf">
    <div class="form-group">
    <input type="file" class="form-control" id="pdfile" placeholder="file" accept="application/pdf" name="pdfFile">
    </div>
    <input type="submit" class="btn btn-primary active" value="Upload Pdf">
</form>

<div class="row" style="height: 450px;">
    <object data="getFilledPdfFromResource" type="application/pdf" width="700" height="450" id="filledPdfContentArea"/>
</div>

我的表单提交似乎正在工作并显示正确处理的文件但导航到新页面，但我需要在同一页面上并在标签中显示 pdf。

我的服务器也返回 byte[]，因此响应适用于我已验证的标签。我只需要一种方法来链接两个功能上传并在标签中显示。

谁能帮我解决这个问题。

Answer 1

我认为这应该有助于在页面上显示文件

    <form class="form-inline" method="POST" enctype="multipart/form-data" action="getFilledPdf">
        <div class="form-group">
        <input type="file" class="form-control" id="pdfile" placeholder="file" accept="application/pdf" name="pdfFile">
        </div>
        <input type="submit" class="btn btn-primary active" value="Upload Pdf">
    </form>

<div class="row" style="height: 450px;">
    <object data="getFilledPdfFromResource" type="application/pdf" width="700" height="450" id="filledPdfContentArea"/>
</div>

window.addEventListener('load', function() {
                document.querySelector('input[type="file"]').addEventListener('change', function() {
                if (this.files && this.files[0]) {
                var object= document.querySelector('object'); // $('object')[0]
                object.src = URL.createObjectURL(this.files[0]); // set src to file url
                }
            });
        });