首页input type=file 数据回显

input type=file 数据回显

时间: 2023-08-27 15:06:35 浏览: 266

解决type=file 文件修改表单名称不能正常回显的问题

easyui 框架下代码如下： css: .file_box{ float: right; width: 1035px; border: 1px solid #999; height: 32px; line-height: 35px; padding-left: 10px; margin-right: 25px; } .file{ float: right; outline: none; border:none; background: #67BEF4; border-radius: 4px; padding: 4px 12px; cursor:pointer; color: #fff

要将用户在 `<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>` 元素中。你可以根据需要修改代码以适应你的具体需求。

阅读全文