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

我在HTML表单中有一些输入框，在加载表单时需要更新，这些值需要从文本文件上载。
这里也提出了类似的问题：

我在网上搜索过这个，但没有找到任何正确的答案。

---

因此，我想知道这是否可行？

如果您希望采用客户端方式，您将对HTML5 FileReader API感兴趣。不幸的是，没有广泛的浏览器支持，所以你可能想考虑谁将使用该功能。我认为它可以在最新的Chrome和Firefox上运行

下面是一个实际的例子：

我也在这里阅读以找到

readAsText

方法：

我会这样做（为了简洁起见，jQuery）：

Javascript 文本文件

---

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

/**
*创建文件上载对话框并返回承诺中的文本
*@returns{Promise}
*/
函数uploadText（）{
返回新承诺（（解决）=>{
//创建文件输入
const uploader=document.createElement（'input'）
uploader.type='file'
uploader.style.display='none'
//听文件
uploader.addEventListener（'change'，（）=>{
const files=uploader.files
if（files.length）{
const reader=new FileReader（）
reader.addEventListener（'load'，（）=>{
uploader.parentNode.removeChild（上载程序）
解析（reader.result）
})
reader.readAsText（文件[0]）
}
})
//触发输入
document.body.appendChild（上传程序）
上传程序。单击（）
})
}
//用法示例
上载文本（）。然后（文本=>{
console.log（文本）
})
//异步使用示例
常量文本=等待上载文本（）

是的，这是可能的。使用input type=file您的意思是您有一个要读取并附加到html中的文本文件，还是要使用js处理表单上载？哪些值、哪些输入框、需要更新的内容、文件的格式、文件在哪里、上载到哪里。。。WTF如果您发布了一些代码，可能会更清楚。例如，有一个输入框，需要在加载时在开始时自动填充，我必须能够在加载后进行更改。基本上，您需要处理上传的文件，并根据文件内容相应地更新页面/表单，对吗？尝试了上面的JSFIDLE，因为我可以浏览文件，并选择一些文本文件，但是当我提交上传按钮时，什么都没有发生，这是什么原因？是因为浏览器问题吗？上面的代码对你有用吗？是的，在Chrome和Firefox中对我有用。你上传的文件是否包含我建议的文本？更新了我的答案以显示这一点。然而，解析文本实际上并不在这个问题的范围之内。一旦变量中有了文本（在本例中为

file

在

processFile

中），您就可以随心所欲地使用它了。是的，现在就可以了。。很抱歉，我也想知道这是如何与php一起工作的，或者当文件位于服务器端时是如何工作的？i、 e.当我可以访问后端时，在这种情况下，我还需要选择一个文本文件，将文本文件值与javascript ID匹配，然后输入输入值。IE 10也支持FileReader。关于支持：@JonJaques在上面，如果文本文件内容是，Name:Jon Age:25，但我只想提取第一行中的'Jon'和第二行中的'25'，并像以前一样将它们输入html框中，是否可以这样做？

Jon
25

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