不上传文件到服务器，可以用JS查看和打印文件吗？

Question

我想上传单独的文件，然后在不上传服务器的情况下查看和打印这些文件。如果用户单击发送按钮，将这些文件发送到服务器。

经验：

<p>
    <input type="file" id="file1">
    <img src="">Show thumbnail here
    <button class="print">Print</button>
</p>

<p>
    <input type="file" id="file2">
    <img src="">Show thumbnail here
    <button class="print">Print</button>
</p>

<p>
    <input type="file" id="file3">
    <img src="">Show thumbnail here
    <button class="print">Print</button>
</p>

<p>
    <input type="file" id="file4">
    <img src="">Show thumbnail here
    <button class="print">Print</button>
</p>

<button>Send All Files to Server</button>

Fiddle Example

我可以只使用 vanilla JS 而不使用第三方应用程序吗？

Answer 1

您可以使用File Reader API 读取文件，然后将它们绘制成canvas，使用print-only CSS 隐藏（display: none）画布以外的所有元素。