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 相关文章推荐
php XPath对XML文件查找及修改实现代码
Jul 27 PHP
php selectradio和checkbox默认选择的实现方法详解
Jun 29 PHP
PHP图片上传代码
Nov 04 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
Nov 17 PHP
php下Memcached入门实例解析
Jan 05 PHP
php打印一个边长为N的实心和空心菱型的方法
Mar 02 PHP
php计算整个目录大小的方法
Jun 19 PHP
Ajax+PHP实现的模拟进度条功能示例
Feb 11 PHP
thinkPHP5使用Rabc实现权限管理
Aug 28 PHP
为你的 Laravel 验证器加上多验证场景的实现
Apr 07 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
Mar 09 PHP
详解PHP用mb_string处理windows中文字符
May 26 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
python邮件发送smtplib使用详解
2020/06/16 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
《黄河颂》教学反思
2014/02/07 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
语文复习计划
2015/01/19 职场文书
开国大典观后感
2015/06/04 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
win10下go mod配置方式
2021/04/25 Golang
基于Python的EasyGUI学习实践
2021/05/07 Python
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
Nginx反向代理学习实例教程
2021/10/24 Servers