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羽言  阅读(53)  评论(0)    收藏  举报