jQuery上传多张图片带进度条样式（DEMO）

时间：2021-05-26

下面一段代码给大家分享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上传多张图片带进度条样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章