当需要在JavaScript中使用FormData对象来完成文件或者图片上传时，可以按照以下步骤进行：
创建FormData对象
可以通过new FormData()创建一个空的FormData对象。
let formData = new FormData();
添加要上传的文件或者图片
使用append()方法向formData对象中添加要上传的文件或者图片。
let file = document.querySelector('input[type=file]').files[0];
formData.append('file', file);
发送请求
可以通过XMLHttpRequest对象来发送请求，使用open()方法和send()方法将FormData对象上传到服务端。
let xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);
完整示例1：上传单个文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传文件</title>
</head>
<body>
<input type="file" id="file">
<button onclick="submit()">上传文件</button>
</body>
<script type="text/javascript">
function submit() {
let file = document.querySelector('input[type=file]').files[0];
let formData = new FormData();
formData.append('file', file);
let xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);
}
</script>
</html>
完整示例2：上传多个文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传文件</title>
</head>
<body>
<input type="file" id="file" multiple>
<button onclick="submit()">上传文件</button>
</body>
<script type="text/javascript">
function submit() {
let files = document.querySelector('input[type=file]').files;
let formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
let xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);
}
</script>
</html>
以上是使用FormData上传文件和图片的方法，可以通过以上示例，按照以上步骤，实现文件和图片上传功能。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS中使用FormData上传文件、图片的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 