JS中如何在不同页面中通过一次选择预览一个文件

Question

我正在制作一个 PDF 查看器。我正在使用 ADOBE View SDK。我有一个文件输入，但问题是我想以不同的视图显示文件 - 全屏、半屏和内联。但是当用户 select 一个文件和 select 一个不同的视图时，整个页面会重新加载，然后用户必须再次 select 该文件。我不希望用户再次 select 该文件。

文件输入：

<input type='file' onchange="listenForFileUpload(this);" id="file-picker" accept="application/pdf">

listenForFileUpload 函数：

    var fileToRead = document.getElementById("file-picker");
    fileToRead.addEventListener("change", function (event) {
        var files = fileToRead.files;
        var input = document.getElementById('file-data').value
        input = files
        console.log(files)
        document.getElementById('file-form').submit()
        if (files.length > 0 && isValidPDF(files[0])) {
            var fileName = files[0].name;
            var reader = new FileReader();
            reader.onloadend = function (e) {
                var filePromise = Promise.resolve(e.target.result);
                previewFile(filePromise, fileName);
            };
            reader.readAsArrayBuffer(files[0]);
        }
    }, false);
}

请帮我在不重新加载的情况下更改视图。

Answer 1

这里是这一行：

document.getElementById('file-form').submit()

您正在那里提交表格。我只是删除它。

JS中如何在不同页面中通过一次选择预览一个文件

How to preview a file in different pages with one selection in JS

html

javascript

adobe-embed-api