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>

posted @ 2024-04-02 13:03 C羽言阅读(45) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 爬虫之抓取js生成的数据

· node.js启动文件服务器并自动查询index.html等默认文件

· HTML5的 input:file上传类型控制

· js请求发送表单数据格式的参数（向后端直传文件时使用）

· HTML_5_表单

C羽言

js表单文件提交

HTML5的File API

搜索

随笔分类