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 相关文章推荐
使用sockets:从新闻组中获取文章(二)
Oct 09 PHP
CodeIgniter php mvc框架 中国网站
May 26 PHP
php 保留小数点
Apr 21 PHP
php ftp文件上传函数(基础版)
Jun 03 PHP
php 目录与文件处理-郑阿奇(续)
Jul 04 PHP
php 函数中使用static的说明
Jun 01 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
Jun 03 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
Jun 25 PHP
php ZipArchive压缩函数详解实例
Nov 06 PHP
php实现的网页版剪刀石头布游戏示例
Nov 25 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
Jul 04 PHP
解决laravel 出现ajax请求419(unknown status)的问题
Sep 03 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
提取HTML标签
2006/10/09 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php数据库抽象层 PDO
2011/05/07 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
新闻系毕业生推荐信
2013/11/16 职场文书
教师自荐信范文
2013/12/09 职场文书
门诊手术室工作制度
2014/01/30 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
货车司机岗位职责
2014/03/18 职场文书
销售提升方案
2014/06/07 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
最感人的道歉情书
2015/05/12 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
朋友离别感言
2015/08/04 职场文书
《穷人》教学反思
2016/02/19 职场文书