Question

使用以下输入字段，用户提交一个或多个HTML文件。

<input type="file" id="inputfield" accept="text/html" multiple/>
<div id="get-files">Get Files</div>

单击get-files时，如何使用fileReader API获取输入字段中每个文件的内容并弄乱每个文件内容？

我尝试了以下操作，但没有收到任何错误或内容。

$("#get-files").on("click", function() { getFilesContent(); });
function getFilesContent() {
    var pages = $("#inputfield")[0].files;
    // get files data
    for (var i = 0; i < pages.length; i++) {
        var reader = new FileReader();
        reader.onload = (function() {
            return function(e) {
                console.log($("#inputfield")[0].result);
            }
        });
        reader.readAsText(pages[i]);
    }
}

Answer 1

试试这个

function getFilesContent() {
    var pages = $("#inputfield")[0].files;    
    for (let i = 0; i < pages.length; i++) {
        let reader = new FileReader();
        reader.onload = function() {
            console.log(reader.result);
        }
        reader.readAsText(pages[i]);
    }
}

reader.result包含您的HTML数据。

单击单独按钮时读取输入字段文件

1 个答案: