原生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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 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
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
php中对2个数组相加的函数
2011/06/24 PHP
php对数组排序代码分享
2014/02/24 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
详解Python字符串切片
2019/05/20 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
python定位xpath 节点位置的方法
2019/08/27 Python
py-charm延长试用期限实例
2019/12/22 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
课例研修方案
2014/05/31 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
群众路线领导对照材料
2014/08/23 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2015年党性分析材料
2014/12/19 职场文书
食堂卫生管理制度
2015/08/04 职场文书