javascript 文件上传

作者：拽一个给爷看发布日期:2026-02-23 浏览:65

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 文件上传</title>
</head>
<body>
    <h2>文件上传示例</h2>
    <form id="uploadForm" enctype="multipart/form-data">
        选择文件: <input type="file" name="fileToUpload" id="fileToUpload">
        <input type="button" value="上传" onclick="uploadFile()">
    </form>
    <p id="status"></p>

    <script>
        function uploadFile() {
            var formData = new FormData();
            var fileInput = document.getElementById('fileToUpload');
            var file = fileInput.files[0];

            if (file) {
                formData.append("file", file);

                // 创建 XMLHttpRequest 对象
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "/upload", true);

                // 设置进度事件处理程序
                xhr.upload.onprogress = function(event) {
                    if (event.lengthComputable) {
                        var percentComplete = (event.loaded / event.total) * 100;
                        document.getElementById('status').innerHTML = "上传进度: " + Math.round(percentComplete) + "%";
                    }
                };

                // 设置完成事件处理程序
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        document.getElementById('status').innerHTML = "文件上传成功!";
                    } else {
                        document.getElementById('status').innerHTML = "文件上传失败.";
                    }
                };

                // 发送请求
                xhr.send(formData);
            } else {
                document.getElementById('status').innerHTML = "请选择一个文件再上传.";
            }
        }
    </script>
</body>
</html>

解释说明：

HTML 表单:
- 使用 <form> 标签创建一个表单，并设置 enctype="multipart/form-data"，以确保文件数据可以正确传输。
- 包含一个文件输入框 (<input type="file">) 和一个按钮 (<input type="button">) 来触发文件上传。
JavaScript 部分:
- uploadFile() 函数用于处理文件上传逻辑。
- 使用 FormData 对象来构造要发送的数据，其中包含用户选择的文件。
- 使用 XMLHttpRequest 对象发起 POST 请求到服务器的 /upload 路径。
- 监听 xhr.upload.onprogress 事件来显示上传进度。
- 监听 xhr.onload 事件来处理上传完成后的响应，并根据状态更新页面上的提示信息。
服务器端处理:
- 该示例假设服务器有一个 /upload 端点来处理文件上传请求。实际应用中，你需要在服务器端实现相应的处理逻辑（例如保存文件到服务器）。

上一篇：javascript apply

下一篇：javascript console