首页input type=file 数据回显

input type=file 数据回显

时间: 2023-08-27 11:06:35 浏览: 285

要将用户在 `<input type="file">` 元素中选择的文件数据回显，你可以使用 JavaScript 来实现。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>文件回显示例</title> <script> function handleFileSelect(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { const contents = e.target.result; document.getElementById('fileContents').textContent = contents; }; reader.readAsText(file); } </script> </head> <body> <input type="file" id="fileInput" onchange="handleFileSelect(event)"> <div id="fileContents"></div> </body> </html> ``` 在上面的示例中，我们首先定义了一个 `handleFileSelect` 函数，该函数会在用户选择文件后被调用。通过 `event.target.files` 可以获取到用户选择的文件对象，我们使用 `FileReader` 对象来读取文件内容。在 `reader.onload` 事件处理程序中，我们可以通过 `e.target.result` 获取到文件的内容，并将其显示在页面上。最后，我们在 `<input type="file">` 元素上添加了 `onchange` 事件监听器，当用户选择文件时，会触发 `handleFileSelect` 函数。当用户选择文件后，文件的内容将会显示在 `<div id="fileContents"></div>` 元素中。你可以根据需要修改代码以适应你的具体需求。

阅读全文