jq上传多张图片（带进度条）

最新推荐文章于 2023-03-24 10:51:01 发布

云非云额

最新推荐文章于 2023-03-24 10:51:01 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端H5 文章标签：上传图片

本文链接：https://blog.youkuaiyun.com/duan199404/article/details/59481095

前端H5 专栏收录该内容

12 篇文章

订阅专栏

这是一个HTML示例，展示了如何使用XMLHttpRequest2实现多张图片上传，并在上传过程中显示进度条。通过创建FormData对象，将选择的文件逐个追加到表单数据中，然后通过POST请求发送到服务器。xhr.upload.onprogress事件用于监听上传进度，并更新进度条显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>xhr2</title>
</head>
<body>
<div style="text-align: center; margin: 100px">
<input type="file" id="file" name="file" multiple="multiple">
<progress id="uploadprogress" min="0" max="100" value="0">0</progress>
<button onclick="xhr2()">OK</button>
</div>
<script>
function xhr2() {
var xhr = new XMLHttpRequest();//第一步
//定义表单变量
var file = document.getElementById('file').files;
//console.log(file.length);
//新建一个FormData对象
var formData = new FormData(); //++++++++++
formData.append("enctype","multipart/form-data");
//追加文件数据
for (i = 0; i < file.length; i++) {
formData.append("file[" + i + "]", file[i]); //++++++++++
}
//formData.append("file", file[0]); //++++++++++

//post方式
xhr.open('POST', '/common/doUpload'); //第二步骤
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var complete = (event.loaded / event.total * 100 | 0);
var progress = document.getElementById('uploadprogress');
progress.value = progress.innerHTML = complete;
}
};
//发送请求
xhr.send(formData); //第三步骤
//ajax返回
xhr.onreadystatechange = function() { //第四步
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
//设置超时时间
xhr.timeout = 100000;
xhr.ontimeout = function(event) {
alert('请求超时！');
}
}
</script>
</body>
</html>