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


Posted in Javascript onMarch 27, 2020

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>
<?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);

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 #Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 #Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 #Javascript
JavaScript实现随机数生成器(去重)
Oct 13 #Javascript
AngualrJs清除定时器遇到的坑
Oct 13 #Javascript
React Native中Navigator的使用方法示例
Oct 13 #Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 #Javascript
You might like
把77A收信机改造成收音机
2021/03/02 无线电
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
jQuery timers计时器简单应用说明
2010/10/28 Javascript
获取body标签的两种方法
2011/10/13 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
浅谈React之状态(State)
2018/09/19 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
python一键升级所有pip package的方法
2017/01/16 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python控制Firefox方法总结
2019/06/03 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
python 写一个文件分发小程序
2020/12/05 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
施工人员岗位职责
2013/12/12 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
青春无悔演讲稿
2014/05/08 职场文书
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript