如何使用输入类型文件并在屏幕上显示所选文件 - Html

在 Web 应用程序中，用户输入文件通常需要上传到服务器进行处理或存储。在这种情况下，我们可以使用 input 元素的 type="file" 属性来创建一个用于上传文件的表单控件。

创建上传表单

以下是使用 input 元素创建上传表单的基本 HTML 代码示例：

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="myFile">
  <input type="submit" value="上传">
</form>

注意 form 元素的 enctype 属性必须设置为 multipart/form-data，这样浏览器才能正确编码文件并将其与表单数据一起发送到服务器。另外，还要为 input 元素指定一个独一无二的名称，以便在服务器端接收文件。

处理上传文件

一旦用户选择了文件并提交了表单，服务器就可以使用各种后端编程语言（如 PHP、Python、Node.js 等）来处理上传文件。以下是使用 Node.js 和 Express 实现文件上传的示例代码：

const express = require('express');
const multer  = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('myFile'), (req, res) => {
  res.send('文件上传成功！');
});

在此示例中，使用 multer Node.js 模块来处理上传的文件。dest 属性指定上传文件的存储路径，而 upload.single('myFile') 中的参数则表示文件表单控件的名称。

显示上传文件

一旦文件上传成功，服务器可以向客户端返回链接或直接将文件嵌入 HTML 页面中。以下是向客户端返回链接的示例代码：

app.post('/upload', upload.single('myFile'), (req, res) => {
  const fileUrl = `http://localhost:3000/${req.file.path}`;
  res.send(`文件上传成功！<br><a href="${fileUrl}">${req.file.originalname}</a>`);
});

在此示例中，将上传文件的 URL 构造为服务器的基地址加上文件的存储路径，然后将其链接显示在页面上。

结论

使用 input 元素的 type="file" 属性，我们可以轻松地创建一个用于上传文件的表单控件。然后，通过后端编程语言处理上传文件，并在页面上嵌入或返回链接。