PHP实现带进度条的Ajax文件上传功能示例


Posted in PHP onJuly 02, 2019

本文实例讲述了PHP实现带进度条的Ajax文件上传功能。分享给大家供大家参考,具体如下:

之前分享了一篇关于 php使用FileApi实现Ajax上传文件 的文章,里面的Ajax文件上传是不带进度条的,今天分享一篇关于带进度条的Ajax文件上传文章。

效果图:

PHP实现带进度条的Ajax文件上传功能示例

项目结构图:

PHP实现带进度条的Ajax文件上传功能示例

12-progress-upload.html文件:

页面中主要有一个上传文件控件,有文件被选择时响应selfile()方法,接着利用js读取上传文件、创建FormData对象和xhr对象,利用xhr2的新标准,写一个监听上传过程函数,请求11-fileApi.php文件。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>HTML5带进度条的上传功能</title>
  <link rel="stylesheet" href="">
<script>
  function selfile(){
    //js读取上传文件
    var file = document.getElementsByTagName('input')[0].files[0];
    //创建FormData对象
    var fd = new FormData();
    fd.append('pic',file);
    //ajax上传文件
    var xhr = new XMLHttpRequest();
    xhr.open('POST','11-fileApi.php',true);
    //利用xhr2的新标准,为上传过程,写一个监听函数
    xhr.upload.onprogress = function(ev){
      if(ev.lengthComputable){//文件长度可计算
        var percent = 100*ev.loaded/ev.total;//计算上传的百分比
        document.getElementById('bar').style.width = percent + '%';//更改上传进度
        document.getElementById('bar').innerHTML = parseInt(percent)+'%';//显示上传进度
      }
    }
    xhr.send(fd);//发送请求
  }
</script>
<style>
  #progress{
    width:500px;
    height:30px;
    border:1px solid green;
  }
  #bar{
    width:0%;
    height:100%;
    background-color: green;
  }
</style>
</head>
<body>
  <h1>HTML5带进度条的上传功能</h1>
  <div id="progress">
    <div id="bar"></div>
  </div>
  <input type="file" name="pic" onchange="selfile();" />
</body>
</html>

11-fileApi.php文件:

首先判断是否有文件上传,然后判断文件上传是否成功,最后移动文件至当前目录下的upload目录下,文件名不变。

<?php
/**
 * fileApi实现Ajax上传文件
 * @author webbc
 */
if(empty($_FILES)){
  exit('no file');
}
if($_FILES['pic']['error'] !== 0){
  exit('fail');
}
move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/'.$_FILES['pic']['name']);
?>

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
不用GD库生成当前时间的PNG格式图象的程序
Oct 09 PHP
php中防止伪造跨站请求的小招式
Sep 02 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
Nov 07 PHP
php面向对象中的魔术方法中文说明
Mar 04 PHP
PHP打开和关闭文件操作函数总结
Nov 18 PHP
PHP生成压缩文件实例
Feb 07 PHP
PHP使用array_merge重新排列数组下标的方法
Jul 22 PHP
PHP实现简单数字分页效果
Jul 26 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
Apr 05 PHP
thinkPHP微信分享接口JSSDK用法实例
Jul 07 PHP
php制作圆形用户头像的实例_自定义封装类源代码
Sep 18 PHP
php无限级分类实现评论及回复功能
Feb 18 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
Jul 01 #PHP
PHP大文件切割上传并带进度条功能示例
Jul 01 #PHP
PHP大文件切割上传功能实例分析
Jul 01 #PHP
PHP使用反向Ajax技术实现在线客服系统详解
Jul 01 #PHP
PHP封装cURL工具类与应用示例
Jul 01 #PHP
PHP session垃圾回收机制实例分析
Jun 28 #PHP
PHP常用的类封装小结【4个工具类】
Jun 28 #PHP
You might like
星际实力自我测试
2020/03/04 星际争霸
PHP中的array数组类型分析说明
2010/07/27 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
jquery滚动特效集锦
2015/06/03 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
python实现比较两段文本不同之处的方法
2015/05/30 Python
python re模块的高级用法详解
2018/06/06 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
提升python处理速度原理及方法实例
2019/12/25 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
软件测试企业面试试卷
2016/07/13 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
大学生未来职业生涯规划书
2014/02/15 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
工厂无线对讲系统解决方案
2022/02/18 无线电