如何在 javascript 中读取 HTML 文件内容答案

【问题标题】：How to read HTML file contents in javascript如何在 javascript 中读取 HTML 文件内容
【发布时间】：2017-02-09 13:54:02
【问题描述】：

我正在通过 ajax 发送数据以在 mysql 中发布。在这种情况下如何包含图像文件内容？

如果我像这样使用： var formData = document.getElementById("img_file");
警报(formData.files[0]);

，我得到错误。注意：img_file 是文件 dom 的 id。对此有任何想法吗？

【问题讨论】：

stackoverflow.com/questions/942105/file-data-from-input-element的可能重复
“我出错了”——什么错误？！
@Quentin，我无法从该数据集中提取文件详细信息。这是真正的麻烦和错误。

标签： javascript html ajax file

【解决方案1】：

您可以为此目的使用 javascript FileReader。这是一个示例代码演示。

<html>
    <body>

        <input type="file" id="fileinput" />
        <div id="ReadResult"></div>
        <script type="text/javascript">
            function readSingleFile(evt) {
                //Retrieve the first (and only!) File from the FileList object
                var f = evt.target.files[0];

                if (f) {
                    var r = new FileReader();
                    r.onload = function (e) {
                        var contents = e.target.result;
                        document.getElementById("ReadResult").innerHTML = contents;
                    }
                    r.readAsText(f);
                } else {
                    alert("Failed to load file");
                }
            }

            document.getElementById('fileinput').addEventListener('change', readSingleFile, false);

        </script>
    </body>

</html>

了解更多详情here。

【讨论】：

【解决方案2】：

我认为它可以帮助你。

 $('#image').change(function () {
            $("#add").attr("disabled", true);
            var img = this.files[0];
            var reader = new FileReader;
            reader.readAsDataURL(img);
            reader.onload = function (e) {
                var file = new Image;
                file.src = e.target.result;
                file.onload = function () {
                    $("#height").text(file.height);
                    $("#width").text(file.width);
                    $("#imageprev").attr("src", file.src);
                    $("#upld").removeAttr("disabled");
                }
            }

        });

【讨论】：