js formData和 new FileReader()上传方式
时间: 2024-03-09 20:48:39 浏览: 19
JavaScript中,可以使用formData和new FileReader()实现文件上传功能。
formData是一个表单数据对象,可以通过append方法向其中添加数据,包括文件数据。通过使用formData对象,可以通过ajax等方式将文件上传到服务器。
new FileReader()是一个文件读取对象,可以读取本地文件的内容。在文件上传时,通常需要先通过new FileReader()读取文件内容,然后将文件内容添加到formData对象中,最终上传到服务器。
具体使用方法可以参考以下示例代码:
```javascript
// 获取文件输入框
var fileInput = document.getElementById('file-input');
// 当文件选择后,通过new FileReader()读取文件内容
fileInput.addEventListener('change', function() {
var file = fileInput.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
// 文件读取完成后,将文件内容添加到formData中
var formData = new FormData();
formData.append('file', file);
formData.append('fileContent', reader.result);
// 使用ajax将formData上传到服务器
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);
}
});
```
上述代码中,通过监听文件输入框的change事件,获取选择的文件。然后使用new FileReader()读取文件内容,将文件内容添加到formData对象中。最后使用ajax将formData上传到服务器。