原生js实现文件上传
时间: 2024-02-10 19:47:09 浏览: 32
可以使用原生 JavaScript 实现文件上传,以下是一个基本的示例:
HTML 代码:
```html
<input type="file" id="file-upload" />
<button onclick="uploadFile()">上传文件</button>
```
JavaScript 代码:
```javascript
function uploadFile() {
var input = document.getElementById('file-upload');
var file = input.files[0];
var formData = new FormData();
formData.append('file', file);
var request = new XMLHttpRequest();
request.open('POST', 'your-upload-url', true);
request.onreadystatechange = function() {
if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
// 文件上传成功的处理逻辑
console.log(request.responseText);
}
};
request.send(formData);
}
```
上述代码中,我们首先获取了文件上传表单元素和文件对象。然后,创建一个 FormData 对象,并将文件对象添加到其中。接下来,创建一个 XMLHttpRequest 对象,并使用 `open` 方法指定上传的 URL、请求方式等参数。
在 `onreadystatechange` 事件中,我们检查请求的状态是否为完成状态(`XMLHttpRequest.DONE`)且响应状态码是否为 200(表示成功)。如果满足条件,表示文件上传成功,可以在这里处理成功的逻辑。
最后,通过调用 `send` 方法发送请求,将文件上传到指定的 URL。请将 `'your-upload-url'` 替换为实际的上传地址。
注意:由于涉及到跨域请求,请确保上传地址的配置允许跨域请求。另外,此代码示例基于原生 JavaScript 实现,没有使用任何框架或库。如果你使用的是某个特定的框架或库,可能会有相应的上传方法或插件可用。