0

我希望能够读取与 html 文件存储在同一目录中的文件。当通过http访问html文件时，没有问题；我可以只使用 HttpXMLRequest。但是，当从本地磁盘读取 HTML 时（与大多数桌面浏览器中的 File/Open 一样，似乎 HttpXMLRequest 不起作用。我曾经使用 Java Applet 来执行此操作，但是（a）我注意到没有不适用于某些浏览器，并且 (b) 我想要一个仅使用 JavaScript 的解决方案：没有 Java 也没有 Flash。

4

2 回答 2

0

HttpXMLRequest 正如它所建议的那样发出 HTTP 请求 - 如果没有网络服务器，这是不可能的，但设置 localhost 服务器并不难。

尽管我敢肯定还有其他固执己见的人会提出其他建议；如果您不使用默认/预安装的 apache 服务器，我对 windows 机器的偏好是 EasyPHP http://www.easyphp.org/和 XAMP。

于 2013-04-29T16:31:02.670 回答
0

这是将文件读入 javascript 的解决方案，但目前我不清楚您是否仅限于 AJAX 样式请求。无论如何，如果您不仅限于该方法，那么您可以使用FileReader。

以下示例使用readAsDataURL但您可以使用其他列出的方法之一。

void readAsArrayBuffer(in Blob blob); Requires Gecko 7.0
void readAsBinaryString(in Blob blob);
void readAsDataURL(in Blob file);
void readAsText(in Blob blob, [optional] in DOMString encoding);

所以这里是加载文件的示例，然后将其转换为 base64 并为您显示结果字符串。

CSS

#progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    clear: both;
    opacity: 0;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
    opacity: 1.0;
}
#progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
}
#display {
    width: 500px;

高度：150px；}

HTML

<input type="file" id="files" name="file" />
<button id="cancel">Cancel read</button>
<div id="progress_bar">
    <div class="percent">0%</div>
</div>
<div>Base64 encoded result</div>
<textarea id="display"></textarea>

Javascript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global */

(function () {
    "use strict";

    var reader,
    progress = document.querySelector(".percent"),
        display = document.getElementById("display"),
        iFiles = document.getElementById("files"),
        bCancel = document.getElementById("cancel"),
        dropZone = document.getElementById("drop_zone"),
        filebox = document.getElementById("filebox"),
        list = document.getElementById("list");

    function abortRead() {
        if (reader) {
            reader.abort();
        }
    }

    function errorHandler(evt) {
        switch (evt.target.error.code) {
            case evt.target.error.NOT_FOUND_ERR:
                alert("File Not Found!");
                break;
            case evt.target.error.NOT_READABLE_ERR:
                alert("File is not readable");
                break;
            case evt.target.error.ABORT_ERR:
                break; // noop
            default:
                alert("An error occurred reading this file.");
        };
    }

    function updateProgress(evt) {
        // evt is an ProgressEvent.
        if (evt.lengthComputable) {
            var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
            // Increase the progress bar length.
            if (percentLoaded < 100) {
                progress.style.width = percentLoaded + "%";
                progress.textContent = percentLoaded + "%";
            }
        }
    }

    function handleFileSelect(evt) {
        // Reset progress indicator on new file selection.
        progress.style.width = "0%";
        progress.textContent = "0%";

        reader = new FileReader();
        reader.onerror = errorHandler;
        reader.onprogress = updateProgress;
        reader.onabort = function (e) {
            alert('File read cancelled');
        };

        reader.onloadstart = function (e) {
            document.getElementById('progress_bar').className = 'loading';
        };

        reader.onload = function (e) {
            // Ensure that the progress bar displays 100% at the end.
            progress.style.width = "100%";
            progress.textContent = "100%";
            setTimeout("document.getElementById('progress_bar').className='';", 2000);
            display.value = e.target.result;
        }

        // Read in the image file as a binary string.
        reader.readAsDataURL(evt.target.files[0]);
    }

    iFiles.addEventListener("change", handleFileSelect, false);
    bCancel.addEventListener("click", abortRead, false);
}());

在jsfiddle 上

更新：来自 W3C 文件 API - 工作草案

安全注意事项

该规范允许 Web 内容从底层文件系统读取文件，并提供一种通过唯一标识符访问文件的方法，因此需要考虑一些安全性考虑。该规范还假设主要的用户交互是与 HTML 表单 [HTML] 的元素进行的，并且 FileReader 对象正在读取的所有文件都首先由用户选择。重要的安全注意事项包括防止恶意文件选择攻击（选择循环）、防止访问系统敏感文件以及防止在选择发生后修改磁盘上的文件。

于 2013-04-29T16:59:00.123 回答