javascript - 是否可以上传文本文件以在 HTML/JS 中输入？

Question

我在 HTML 表单中有一些输入框，当表单加载时需要更新这些输入框，并且这些值需要从文本文件上传。
这里也问了一个类似的问题： Uploading Text File to Input in Html/JS

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

Answer 1

如果您想走客户端路线，您将对 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/

Javascript

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

Answer 2

另一个答案很好，但有点过时了，它需要 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()