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程序设计有所帮助。

赞 (0)

相关推荐

  • PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足

  • php+ajax 文件上传代码实例

    本文实例为大家分享了php+ajax 文件上传的具体代码,供大家参考,具体内容如下 html 代码 <form action="{pboot:form fcode=8}" method="post" id="t" enctype="multipart/form-data"> <input type="file" name='tables_a' id="tables" o

  • PHP利用APC模块实现大文件上传进度条的方法

    php 大文件带进度的上传,一直是一个令php程序员很苦恼的问题.查询baidu .Google ,大体做带进度的上传方式为:flash+php,socket,apc+php等,下面我介绍了apc +php+ajax制作的带进度的上传,并贴出源码,希望对大家有用. Alternative PHP Cache(APC)是 PHP 的一个免费公开的优化代码缓存.它用来提供免费,公开并且强健的架构来缓存和优化 PHP 的中间代码. 在使用apc时候,先必须使用安装apc 模块. 第一步:下载php_a

  • php中通过Ajax如何实现异步文件上传的代码实例

    1:取得file对象 2:读取2进制数据 3:模拟http请求,把数据发送出去(这里通常比较麻烦) 在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据: 4:完美实现 遇到的问题 目前仅有 firefox 可以正确上传文件.(chrome也可以采google.gears上传) 对于从firefox和chrome下读取到的文件数据好像不一样(不知道是否是调试工具的原因) chrome以及其他高级浏览器没有 sendasbinary 方法 只能使用

  • php+ajax实现无刷新文件上传功能(ajaxuploadfile)

    本文实例为大家分享了php+ajax实现无刷新文件上传的具体代码,供大家参考,具体内容如下 文件上传的表单格式 <form id="uploadform" enctype="multipart/form-data" name="uploadform" method="post" > <input id="fileToUpload" type="file" name=&q

  • php ajax实现文件上传进度条

    本实例是关于php文件上传时进度条的实现,主要采用ajax技术,另外还运用了html5,有需要的朋友可以研究一下. 本实例有两个文件: upload_form.html: <!DOCTYPE html> <html> <head> <script> function _(el){ return document.getElementById(el); } function uploadFile(){ var file = _("file1"

  • ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

    本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl

  • jQuery Ajax文件上传(php)

    如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件.而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的.那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:test.html 复制代码 代

  • php+ajax实现图片文件上传功能实例

    目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子. 方法一,利用jquery ajaxfileupload.js实现文件上传 其实就是实现无刷新式的文件上传.可采用IFRAME文件上传原理.实际上在用PHP上传文件时...只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.g

  • PHP 文件上传进度条的两种实现方法的代码

    目前我知道的方法有两种,一种是使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc),另外一种方法是使用PECL扩展模块 uploadprogress实现(http://pecl.php.net/package/uploadprogress)我这里举两个分别实现的例子供参考,更灵活的应用根据自己需要来修改. APC实现方法: 安装APC,参照官方文档安装,可以使用PECL模块安装方法快速简捷,这里不说明 配置p

  • PHP利用APC模块实现文件上传进度条的方法

    本文实例讲述了PHP利用APC模块实现文件上传进度条的方法.分享给大家供大家参考.具体分析如下: 以前的php5.2之前的版本是不能可使用APC模块的,因为之前的压根就没有这个APC模块,如果想使用APC模块实现上传进度条我们必须是php5.2或更高版本. 从5.2开始APC加入了一个叫APC_UPLOAD_PROGRESS的东东,解决了困扰大家已久的进度条问题.并且它把原来的上传时把临时文件全部缓存到内存改成了当临时文件达到设定值时就自动保存到硬盘,有效地改善了内存利用状况. 它的作用原理是在

  • File, FileReader 和 Ajax 文件上传实例分析(php)

    File, FileReader 和 Ajax 文件上传实例分析(php)

    File FileReader 可以干什么? Ajax文件上传例子 FileReader 对象可以读取文件的 Base64编码数据(readAsDataURL),2进制字符串(readAsBinaryString),文本(readAsText)并且都是异步的. 对了,Email拖拽附件上传就可以利用 FileReader 配合 Ajax 完成. File 对象 File对象可以从 input[type=file].files 数组,和拖拽事件 event.dataTransfer.files 中

随机推荐