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 相关文章推荐
phpwind中的数据库操作类
Jan 02 PHP
php 什么是PEAR?
Mar 19 PHP
php解析html类库simple_html_dom(详细介绍)
Jul 05 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
Oct 30 PHP
浅谈PDO的rowCount函数
Jun 18 PHP
对比分析php中Cookie与Session的异同
Feb 19 PHP
thinkphp3.x中display方法及show方法的用法实例
May 19 PHP
php微信开发之百度天气预报
Nov 18 PHP
深入理解PHP的远程多会话调试
Sep 21 PHP
php爬取天猫和淘宝商品数据
Feb 23 PHP
Laravel框架在本地虚拟机快速安装的方法详解
Jun 11 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
Oct 17 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
用cookies来跟踪识别用户
2006/10/09 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
Vue实现购物车基本功能
2020/11/08 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python列表生成器的循环技巧分享
2015/03/06 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
德国足球商店:OUTFITTER
2019/05/06 全球购物
志愿者服务感言
2014/02/27 职场文书
工作态度怎么写
2015/06/25 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书