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上传多张图片带进度条样式,希望对大家有所帮助
上一篇: php生成excel列序号代码实例
下一篇: php命名空间学习详解