PHP+Ajax实现上传文件进度条动态显示进度功能


Posted in PHP onJune 04, 2018

PHP+Ajax实现上传文件进度条动态显示进度功能

说个前提:PHP配置文件中规定默认上传文件大小限制2M以下,如需上传大文件需同时更改php.ini中的upload_max_filesizemax_execution_time以及post_max_size的值。

主界面以及Ajax实现:index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>上传文件</title> 
  <script type="text/javascript"> 
    function sub() { 
      var obj = new XMLHttpRequest(); 
      obj.onreadystatechange = function() { 
        if (obj.status == 200 && obj.readyState == 4) { 
          document.getElementById('con').innerHTML = obj.responseText; 
        } 
      } 
      // 通过Ajax对象的upload属性的onprogress事件感知当前文件上传状态 
      obj.upload.onprogress = function(evt) { 
        // 上传附件大小的百分比 
        var per = Math.floor((evt.loaded / evt.total) * 100) + "%"; 
        // 当上传文件时显示进度条 
        document.getElementById('parent').style.display = 'block'; 
        // 通过上传百分比设置进度条样式的宽度 
        document.getElementById('son').style.width = per; 
        // 在进度条上显示上传的进度值 
        document.getElementById('son').innerHTML = per; 
      } 
      // 通过FormData收集零散的文件上传信息 
      var fm = document.getElementById('userfile3').files[0]; 
      var fd = new FormData(); 
      fd.append('userfile', fm); 
      obj.open("post", "upload.php"); 
      obj.send(fd); 
    } 
  </script> 
  <style type="text/css"> 
    #parent { 
      width: 200px; 
      height: 20px; 
      border: 2px solid gray; 
      background: lightgray; 
      display: none; 
    } 
    #son { 
      width: 0; 
      height: 100%; 
      background: lightgreen; 
      text-align: center; 
    } 
  </style> 
</head> 
<body> 
  <h2>Ajax实现进度条文件上传</h2> 
  <div id="parent"> 
    <div id="son"></div> 
  </div> 
  <p id="con"></p> 
  <input type="file" name="userfile" id="userfile3"><br><br> 
  <input type="button" name="btn" value="文件上传" onclick="sub()"> 
</body> 
</html>

php处理上传文件:upload.php

<?php  
  // 上传文件进行简单错误过滤 
  if ($_FILES['userfile']['error'] > 0) { 
    exit("上传文件有错".$_FILES['userfile']['error']); 
  } 
  // 定义存放上传文件的真实路径 
  $path = './upload/'; 
  // 定义存放上传文件的真实路径名字 
  $name = $_FILES['userfile']['name']; 
  // 将文件的名字的字符编码从UTF-8转成GB2312 
  $name = iconv("UTF-8", "GB2312", $name); 
  // 将上传文件移动到指定目录文件中 
  if (move_uploaded_file($_FILES['userfile']['tmp_name'], $path.$name)) { 
    echo "文件上传成功"; 
  } else { 
    echo "文件上传失败"; 
  } 
 ?>

总结

以上所述是小编给大家介绍的PHP+Ajax实现上传文件进度条动态显示进度功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
PHP开发需要注意的安全问题
Sep 01 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
Aug 20 PHP
php5.3不能连接mssql数据库的解决方法
Dec 27 PHP
php给一组指定关键词添加span标签的方法
Mar 31 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
Apr 03 PHP
php获取本周星期一具体日期的方法
Apr 20 PHP
Yii框架中sphinx索引配置方法解析
Oct 18 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
Nov 05 PHP
php+redis实现多台服务器内网存储session并读取示例
Jan 12 PHP
PHP获取当前日期及本周一是几月几号的方法
Mar 28 PHP
PHP迭代器接口Iterator用法分析
Dec 28 PHP
php 广告点击统计代码(php+mysql)
Feb 21 PHP
Laravel利用gulp如何构建前端资源详解
Jun 03 #PHP
PHP学习记录之数组函数
Jun 01 #PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
Jun 01 #PHP
PHP+MySQL实现模糊查询员工信息功能示例
Jun 01 #PHP
php post json参数的传递和接收处理方法
May 31 #PHP
PHP调用接口用post方法传送json数据的实例
May 31 #PHP
ThinkPHP5 验证器的具体使用
May 31 #PHP
You might like
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
深入浅出学习python装饰器
2017/09/29 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
python2.7实现邮件发送功能
2018/12/12 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
如何写求职信
2014/05/24 职场文书
商场周年庆活动方案
2014/08/19 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
基于python的matplotlib制作双Y轴图
2021/04/20 Python