首页用js写文件上传代码

用js写文件上传代码

时间: 2023-10-27 14:07:02 浏览: 159

以下是使用 JavaScript 编写文件上传的示例代码： ```html <!DOCTYPE html> <html> <head> <title>文件上传</title> </head> <body> <form id="upload-form"> <input type="file" name="file" id="file-input"> <button type="submit">上传</button> </form> <script> // 获取表单和文件输入元素 var form = document.getElementById('upload-form'); var fileInput = document.getElementById('file-input'); // 监听表单提交事件 form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止默认提交行为 // 获取文件对象 var file = fileInput.files[0]; // 创建 FormData 对象 var formData = new FormData(); formData.append('file', file); // 发送 POST 请求 var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function() { if (xhr.status === 200) { // 上传成功 console.log('上传成功！'); } else { // 上传失败 console.error('上传失败：' + xhr.statusText); } }; xhr.send(formData); }); </script> </body> </html> ``` 以上代码会创建一个文件上传表单，使用 XMLHttpRequest 对象发送 POST 请求上传文件。上传的文件会作为 FormData 对象的一部分，可以在后端使用相应的框架或库进行处理。

阅读全文