DDR爱好者之家

原生JS上传大文件显示进度条 php上传文件代码
站长资源 2024/11/27 佚名
7 1538
DDR爱好者之家 Design By 杰米

JS原生上传大文件显示进度条，php上传文件，供大家参考，具体内容如下

原生JS上传大文件显示进度条 php上传文件代码

在php.ini修改需要的大小：

upload_max_filesize = 8M   
post_max_size = 10M   
memory_limit = 20M 

<!DOCTYPE html>
<html>
<head>
 <title>原生JS大文件显示进度条</title>
 <meta charset="UTF-8">
 <style type="text/css">
 #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}
 </style>
 <script type="text/javascript">
 function $(id){
  return document.getElementById(id);
 }
 </script>
</head>
<body>
 <form action="" method="post">
 <div id="parent">
  <div id="child"></div>
 </div>
 <p>上传文件:<input type="file" name="file"></p> 
 <p><input type="submit" value="提交" id="submit"></p>
 </form>
 <script type="text/javascript">
 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;
 }
 </script>
</body>
</html>

<"_blank" href="//www.jb51.net/Special/916.htm">《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米