是否可以上传文本文件以 HTML/JS 格式输入

Is it possible to upload a text file to input in HTML/JS?

本文关键字：JS 格式 HTML 输入 文本 是否 文件      更新时间：2023-09-26

我在HTML表单中有一些输入框，需要在表单加载时更新，并且这些值需要从文本文件上传。
这里也提出了一个类似的问题：上传文本文件以 html/JS 格式输入

我已经在互联网上搜索了这个，但找不到任何正确的答案。所以我想知道这是否可能？

如果你想走客户端路线，你会对HTML5 FileReader API感兴趣。不幸的是，浏览器对此没有广泛的支持，因此您可能需要考虑谁将使用该功能。我认为适用于最新的Chrome和Firefox。

下面是一个实际示例：http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files

我也在这里阅读以找到readAsText方法：http://www.w3.org/TR/file-upload/#dfn-readAsText

我会做这样的事情（jQuery为简洁起见）：http://jsfiddle.net/AjaDT/2/

爪哇语

var fileInput = $('#files');
var uploadButton = $('#upload');
uploadButton.on('click', function() {
    if (!window.FileReader) {
        alert('Your browser is not supported');
        return false;
    }
    var input = fileInput.get(0);
    // Create a reader object
    var reader = new FileReader();
    if (input.files.length) {
        var textFile = input.files[0];
        // Read the file
        reader.readAsText(textFile);
        // When it's loaded, process it
        $(reader).on('load', processFile);
    } else {
        alert('Please upload a file before continuing')
    } 
});
function processFile(e) {
    var file = e.target.result,
        results;
    if (file && file.length) {
        results = file.split("'n");
        $('#name').val(results[0]);
        $('#age').val(results[1]);
    }
}

文本文件

Jon
25

另一个答案很棒，但有点过时了，它需要HTML和jQuery才能运行。

这是我的做法，适用于所有现代浏览器，直到IE11。

/**
 * Creates a file upload dialog and returns text in promise
 * @returns {Promise<any>}
 */
function uploadText() {
    return new Promise((resolve) => {
        // create file input
        const uploader = document.createElement('input')
        uploader.type = 'file'
        uploader.style.display = 'none'
        // listen for files
        uploader.addEventListener('change', () => {
            const files = uploader.files
            if (files.length) {
                const reader = new FileReader()
                reader.addEventListener('load', () => {
                    uploader.parentNode.removeChild(uploader)
                    resolve(reader.result)
                })
                reader.readAsText(files[0])
            }
        })
        // trigger input
        document.body.appendChild(uploader)
        uploader.click()
    })
}
// usage example
uploadText().then(text => {
     console.log(text)
})
// async usage example
const text = await uploadText()
相关文章：