首页前端上传文件最简单代码

前端上传文件最简单代码

时间: 2024-09-13 13:04:42 浏览: 47

前端上传文件通常使用HTML的`<input type="file">`元素配合JavaScript来实现。下面是一个简单的HTML和JavaScript结合的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>文件上传</title> </head> <body> <input type="file" id="fileInput" multiple> <button onclick="uploadFiles()">上传文件</button> <script> function uploadFiles() { const input = document.getElementById('fileInput'); if (input.files && input.files.length) { for (let i = 0; i < input.files.length; i++) { const file = input.files[i]; const formData = new FormData(); formData.append('file', file); // 这里只是一个模拟，实际应用中你需要发送请求到服务器 fetch('/api/upload', { method: 'POST', body: formData }).then(response => response.text()) .then(data => console.log('上传成功:', data)) .catch(error => console.error('上传失败:', error)); } } else { alert('请选择文件!'); } } </script> </body> </html> ``` 在这个示例中，用户选择文件后点击“上传文件”按钮，会触发`uploadFiles`函数，该函数获取选中的文件并创建一个FormData对象，然后通过fetch API将文件数据发送给服务器的`/api/upload`端点。

阅读全文