js表单文件提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload Form</title>
</head>
<body>
<h2>Upload File</h2>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">Select a file:</label>
<input type="file" id="file" name="file" accept=".txt, .pdf, .doc, .docx">
<br><br>
<button type="submit">Upload</button>
</form>
</body>
</html>
注意:当一个表单包含<input type="file">
时,表单的enctype
必须指定为multipart/form-data
,method
必须指定为post
,浏览器才能正确编码并以multipart/form-data
格式发送表单的数据。
HTML5的File API
File
对象用于获取文件的基本信息,而 FileReader
对象则用于读取文件内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File API Example</title>
</head>
<body>
<h2>选择文件并读取内容</h2>
<input type="file" id="fileInput">
<div id="fileInfo"></div>
<hr>
<div id="fileContent"></div>
<script>
function handleFileSelect(event) {
var file = event.target.files[0]; // 获取第一个文件
// 显示文件信息
var fileInfo = document.getElementById('fileInfo');
fileInfo.innerHTML = '<strong>文件信息:</strong> ' + file.name + ', 类型: ' + file.type + ', 大小: ' + file.size + ' 字节';
// 使用FileReader读取文件内容
var reader = new FileReader();
reader.onload = function (event) {
var contents = event.target.result;
var fileContent = document.getElementById('fileContent');
fileContent.textContent = contents;
};
// 读取文件内容
reader.readAsText(file);
}
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南