欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery上传多张图片带进度条样式(DEMO)

程序员文章站 2023-12-02 16:46:52
下面一段代码给大家分享jquery上传多种图片带进度条样式,具体代码如下所示: &l...

下面一段代码给大家分享jquery上传多种图片带进度条样式,具体代码如下所示:

<!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>

以上所述是小编给大家介绍的关于jquery上传多张图片带进度条样式,希望对大家有所帮助