ajax上传进度条
HTML
1 2 3 4 5 | < input type="file" name="" id="file"> < div id="wrap"> < div id="bar"></ div > < span >0%</ span > </ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #wrap{ height : 50px ; border : 5px solid yellow; position : relative ; text-align : center ; line-height : 50px ; font-size : 28px ; font-weight : bold ; } #bar{ height : 100% ; width : 0 ; background : green ; position : absolute ; left : 0 ; z-index : -1 ; } |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | var file = document.getElementById( 'file' ); var wrap = document.getElementById( 'wrap' ); var bar = document.getElementById( 'bar' ); var wrapSpan = wrap.getElementsByTagName( 'span' )[0]; var maxWidth = wrap.clientWidth; file.onchange = function (){ var f = this .files[0]; var xhr = new XMLHttpRequest(); xhr.open( 'post' , 'php/post_file.php' , true ); xhr.onload = function (){ console.log( this .responseText); }; //上传过程中触发 xhr.upload.onprogress = function (ev){ /* ev.total上传文件的总大小 ev.loaded 当前上传的大小。 */ var scale = ev.loaded/ev.total; wrapSpan.innerHTML = (scale*100).toFixed(2)+ '%' ; bar.style.width = maxWidth*scale+ 'px' ; // console.log(ev.total,ev.loaded); } var fd = new FormData(); fd.append( 'file' ,f); xhr.send(fd); }; |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步