原生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 类型判断代码分析
Mar 28 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 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二分查找二种实现示例
2014/03/12 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
js实现头像上传并且可预览提交
2020/12/25 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
python 安装移动复制第三方库操作
2020/07/13 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
初中生操行评语大全
2014/04/24 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
毕业生对母校寄语
2015/02/26 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
生日赠语
2015/06/23 职场文书
诉讼和解协议书
2016/03/23 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
Redis入门基础常用操作命令整理
2022/06/01 Redis
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server