原生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获得CheckBoxList选中的数量
Oct 27 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
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控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
PHP关联链接常用代码
2012/11/05 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
Django 路由控制的实现代码
2018/11/08 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
房屋租赁协议书范本
2014/04/10 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
如何利用React实现图片识别App
2022/02/18 Javascript