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()

是否可以将文本文件上传到HTML / JS输入？

2 个答案:

的Javascript

文本文件