php实现带进度条的ajax文件上传功能示例

 更新时间:2019年07月02日 08:45:59   作者:webbc   我要评论

这篇文章主要介绍了php实现带进度条的ajax文件上传功能,结合实例形式分析了php+ajax文件上传基础上添加进度条功能相关实现技巧,需要的朋友可以参考下

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

之前分享了一篇关于 php使用fileapi实现ajax上传文件 的文章,里面的ajax文件上传是不带进度条的,今天分享一篇关于带进度条的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目录操作技巧汇总》、《php常用遍历算法与技巧总结》、《php数据结构与算法教程》、《php程序设计算法总结》及《php网络编程技巧总结

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

相关文章

  • php的xml文件解释类应用实例

    php的xml文件解释类应用实例

    这篇文章主要介绍了php的xml文件解释类及其应用实例,包括针对xml文件的读取、解释、检查及输出等功能,非常实用,需要的朋友可以参考下
    2014-09-09
  • php html无刷新提交表单

    php html无刷新提交表单

    这篇文章主要介绍了php html无刷新提交表单,本文介绍了两种无刷新提交表单的方法,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • redis构建分布式锁

    redis构建分布式锁

    本文主要介绍了redis构建分布式锁的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • php弹出对话框技巧详细解读

    php弹出对话框技巧详细解读

    在实现php弹出对话框之后,一般还需要返回原来页面或者用新的页面替换原来的页面等,本文将会讲解详细代码编写,需要的朋友可以参考下
    2015-09-09
  • 如何用php获取文件名后缀

    如何用php获取文件名后缀

    本篇文章是对用php获取文件后缀的方法进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • php中is_file不能替代file_exists的理由

    php中is_file不能替代file_exists的理由

    首先要提出的问题是,is_file真的可以替代file_exists使用吗?答案是否定的。为什么?原因很简单,is_file有缓存
    2014-03-03
  • 解析crontab php自动运行的方法

    解析crontab php自动运行的方法

    本篇文章是对crontab php自动运行的方法进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • php的socket编程详解

    php的socket编程详解

    socket的英文原义是“孔”或“插座”。作为bsd unix的进程通信机制,取后一种意思。用于描述ip地址和端口,是一个通信链的句柄。在internet上的主机一般运行了多个服务软件,同时提供几种服务。每种服务都打开一个socket并绑定到一个端口上,不同的端口对应于不同的服务
    2016-11-11
  • 深入解读php中关于抽象(abstract)类和抽象方法的问题分析

    深入解读php中关于抽象(abstract)类和抽象方法的问题分析

    这篇文章主要介绍了php中关于抽象(abstract)类和抽象方法的问题分析,有需要的朋友可以参考一下
    2014-01-01
  • 用phpmyadmin更改mysql5.0登录密码

    用phpmyadmin更改mysql5.0登录密码

    mysql5.0更改登录密码完成架站完成大斌的blog也一并处理今天忙了整整一天,做了一些无聊并且重复的体力劳动,几乎没有学到什么东西,却浪费了一天时间。可惜,可悲,可叹。不过总算把算服务器的mysql登录密码和phpmyadmin的远程访问方式改好了。mysql自4.1起就更改了加密方式,讲原先16位的加密改成40位,把我害苦了,怎么都连接不上。查遍资料今天总算搞定了通过phpmyadmin更改mysql密码,个人觉得简单实用
    2008-03-03

最新评论