这次给大家带来js上传文件时显示进度条，js上传文件时显示进度条的注意事项有哪些，下面就是实战案例，一起来看一下。
在php.ini修改需要的大小：
upload_max_filesize = 8M
post_max_size = 10M
memory_limit = 20M
原生JS大文件显示进度条 #parent{position: relative;width: 500px;height:20px;border:1px solid #ccc;display: none;border-radius:20px} #child{position: absolute;width:0%;height:20px;background: #5FB878;display: none;line-height: 20px;color: #ffffff;font-size: 12px;border-radius:20px} function $(id){ return document.getElementById(id); }
上传文件:
var oForm = document.getElementsByTagName('form')[0]; var oSubmit = $('submit'); //如果多个人同时提交这个表单的时候，由于是异步的请求，互不影响 oSubmit.onclick = function(){ try{ var xhr = new XMLHttpRequest(); }catch(e){ var xhr = new ActiveXObject("Msxml2.XMLHTTP"); } xhr.upload.onprogress = function(e){ var ev = e || window.event; var percent = Math.floor((ev.loaded / ev.total)*100); // console.log(percent); //将百分比显示到进度条 $('parent').style.display = 'block'; $('child').style.display = 'block'; //将上传进度的百分比显示到child里面 $('child').style.width = percent+'%'; $('child').style.textAlign = 'center'; $('child').innerHTML = percent+'%'; //判断如果百分比到达100%时候，隐藏掉 if(percent==100){ $('parent').style.display = 'none'; $('child').style.display = 'none'; } } xhr.open('post','progress.php',true); var form = new FormData(oForm); xhr.send(form); xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ eval("var obj ="+xhr.responseText); if(obj.status){ alert('上传成功'); }else{ alert('上传失败'); } } } //阻止表单提交 return false; }
登录后复制
<?php //开始上传 //注意：文件是windows系统的文件，采用的gbk编码，php文件使用的是utf-8编码 //我们不能直接修改文件的编码，只能临时修改一下php的编码 $dst_file = $_FILES['file']['name']; $dst_file = iconv('utf-8', 'gbk', $dst_file); if(move_uploaded_file($_FILES['file']['tmp_name'],$dst_file)){ $data['status'] = 1; }else{ $data['status'] = 0; } echo json_encode($data);
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
以上就是JS上传文件时显示进度条的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2771322.html
