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
                }
            });
        });

上传PDF并显示在同一页面上

1 个答案: