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编程开发“虚拟域名”系统
Oct 09 PHP
php 从数据库提取二进制图片的处理代码
Sep 09 PHP
关于PHP结束标签的使用细节探讨及联想
Mar 04 PHP
解析在PHP中使用全局变量的几种方法
Jun 24 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
Jan 04 PHP
thinkPHP5.0框架环境变量配置方法
Mar 17 PHP
iis 7下安装laravel 5.4环境的方法教程
Jun 14 PHP
PHP堆栈调试操作简单示例
Jun 15 PHP
PHP一个简单的无需刷新爬虫
Jan 05 PHP
PHP常量define和const的区别详解
May 18 PHP
laravel 框架结合关联查询 when()用法分析
Nov 22 PHP
PHP 自动加载类原理与用法实例分析
Apr 14 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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
调整PHP的性能
2013/10/30 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
八大排序算法的Python实现
2021/01/28 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
详解python logging日志传输
2020/07/01 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
2019年.net常见面试问题
2012/02/12 面试题
What is EJB
2016/07/22 面试题
入党自我评价范文
2014/02/02 职场文书
小小的船教学反思
2014/02/21 职场文书
校庆筹备方案
2014/03/30 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
岗位说明书范文
2014/05/07 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
python学习之panda数据分析核心支持库
2021/05/07 Python