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-datamethod必须指定为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>

 

posted @   C羽言  阅读(44)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示