Question

我有一个奇怪的问题，我创建了一个打开PNG和PDF的应用程序。问题是，当我尝试打开大于2,000 Kb的PDF文件时，它将无法显示，但是PNG没有问题。我也很困惑为什么会这样。

    <html lang="en"><head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
</head>

<body>

    <ul>
    </ul>

    <fieldset>
        <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000">
        <div>
            <label for="fileselect">Files to upload:</label>
            <input type="file" id="fileselect" name="file-select[]" multiple="multiple">
            <div id="filedrag" style="display: block;">or drop files here</div>
        </div>

        <div id="submitbutton" style="display: none;">
            <button type="submit">Upload Files</button>
        </div>
        <div id="sortbutton">
            <button type="submit">Submit</button>
        </div>
        <div id="resetbutton">
            <button type="submit">Reset</button>
        </div>
    </fieldset>

</form>

<div id="messages">

</div>

<script src="filedrag.js"></script>


</body></html>



    var files;
    (function() {

    // getElementById
    function $id(id) {
        return document.getElementById(id);
    }


    // output information
    function Output(msg) {
        var m = $id("messages");
        m.innerHTML = msg + m.innerHTML;
    }


    // file drag hover
    function FileDragHover(e) {
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : "");
    }


    // file selection
    function FileSelectHandler(e) {

        // cancel event and hover styling
        FileDragHover(e);

        // fetch FileList object
        var files = e.target.files || e.dataTransfer.files;

        // process all File objects
        for (var i = 0, f; f = files[i]; i++) {
            ParseFile(f);

        }

    }



    // output file information
    function ParseFile(file) {
        // display an image
        if (file.type.indexOf("application") == 0) {
            var reader = new FileReader();
            reader.onload = function(e) {
                files.push("<p align=left><strong>" + file.name + ":</strong><br />" +
                    '<object data="' + e.target.result + '"></object></p>');
            }
            reader.readAsDataURL(file);
        } 

        if (file.type.indexOf("image") == 0) {
            var reader = new FileReader();
            reader.onload = function(e) {
                files.push("<p align=left><strong>" + file.name + ":</strong><br />" +
                    '<img src="' + e.target.result + '" height="500px" width="500px"></p>');
            }
            reader.readAsDataURL(file);

        }
    }

    function sortFiles() {
        files.sort().reverse();
        for (var i = 0; i < files.length; ++i) {
            Output(files[i]);
        }
    }

    function resetWindow(){
        window.location.reload(true)
    }


    // initialize
    function Init() {

        var fileselect = $id("fileselect"),
            filedrag = $id("filedrag"),
            submitbutton = $id("submitbutton"),
            sortbutton = $id("sortbutton"),
            resetbutton = $id("resetbutton");

        files = new Array();    
        // file select
        fileselect.addEventListener("change", FileSelectHandler, false);

        // is XHR2 available?
        var xhr = new XMLHttpRequest();
        if (xhr.upload) {

            // file drop
            filedrag.addEventListener("dragover", FileDragHover, false);
            filedrag.addEventListener("dragleave", FileDragHover, false);
            filedrag.addEventListener("drop", FileSelectHandler, false);
            filedrag.style.display = "block";

            // remove submit button
            submitbutton.addEventListener("click", sortFiles , false); //style.display = "none";

            sortbutton.addEventListener("click", sortFiles , false);
            resetbutton.addEventListener("click", resetWindow , false);
        }

    }

    // call initialization file
    if (window.File && window.FileList && window.FileReader) {
        Init();
    }


})();

正如我所说，你试图发布一个大于2000 Kb的PDF文件，它将无法显示，但PNG会显示

Answer 1

我修好了我硬编码显示文件的路径

Answer 2

我遇到了和您一样的问题，并且以这种方式解决了

let logs = await browser
        .manage()
        .logs()
        .get('performance');

某些PDF文件无法打开

2 个答案: