php 使用html5 XHR2实现上传文件与进度显示功能示例

本文实例讲述了php 使用html5 XHR2实现上传文件与进度显示功能。分享给大家供大家参考，具体如下：

思路：只要我们知道上传文件的总大小，还有上传过程中上传文件的大小，那么就可以实现进度显示了。

在html5中，XMLHttpRequest对象，传送数据的时候，progress事件用来返回进度信息。

它分成上传和下载两种情况

1.下载的progress事件属于XMLHttpRequest对象
2.上传的progress事件属于XMLHttpRequest.upload对象。

与progress事件相关的，还有其他五个事件：

1.load事件：传输成功完成。
2.abort事件：传输被用户取消。
3.error事件：传输中出现错误。
4.loadstart事件：传输开始。
5.loadEnd事件：传输结束，但是不知道成功还是失败。

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form method="post" id="myForm">
    <input type="file" name="file" id="upfile" />
    <input type="submit" name="submit" value="提交" />
  </form>
  <div id="upStatus"></div>
</body>
<script type="text/javascript">
  var myForm = document.getElementById("myForm");
  var upfile = document.getElementById("upfile");

  myForm.onsubmit = function() {
    //我们创建一个FormData对象
    var fd = new FormData();
    var file = upfile.files[0];
    //把文件添加到FormData对象中
    fd.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        alert(this.responseText);
      }
    };
    xhr.open("post", "upfile.php", true);

    //监听上传事件
    xhr.upload.onprogress = function(ev) {
      //如果长度是可计算的
      if(ev.lengthComputable) {
        var percent = Math.round((ev.loaded / ev.total) * 100);
        document.getElementById("upStatus").innerHTML = percent + "%";
      }
    };

    //发送FormData对象
    xhr.send(fd);
    return false;
  };
</script>
</html>

upfile.php代码如下：

<?php
$uploadDir = './upload/';
if(!file_exists($uploadDir)) {
  @mkdir($uploadDir, 0777, true);
}
$uploadFile = $uploadDir . basename($_FILES['file']['name']);
if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
  echo "OK";
} else {
  echo "NO";
}

如果上传过程中PHP出现如下信息：

Warning: POST Content-Length of 625523488 bytes exceeds the limit of 8388608 bytes in Unknown on line 0

说明文件大小超出了PHP设置限制，可以设置php.ini

;脚本解析输入数据(类似 POST 和 GET)允许的最大时间，单位是秒。

;它从接收所有数据到开始执行脚本进行测量的。
max_input_time = 60

;允许客户端单个POST请求发送的最大数据
post_max_size = 64M

;是否开启文件上传功能
file_uploads = On

;文件上传的临时存放目录(如果不指定，使用系统默认的临时目录)
;upload_tmp_dir =

;允许单个请求上传的最大文件大小
upload_max_filesize = 64M

;允许单个POST请求同时上传的最大文件数量
max_file_uploads = 20

更多关于PHP相关内容感兴趣的读者可查看本站专题：《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》及《PHP网络编程技巧总结》

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

赞 (0)

相关推荐

  • 使用PHP和HTML5 FormData实现无刷新文件上传教程

    无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单请求,并通过 XMLHttpRequest 来发送.通过 FormData 对象发送文件也是可以的,如此则无刷新上传就变的非常简单了. 那么 FormData 怎么使用呢?下面我们对此进行简单的介绍. 1. 构造 FormData 对象 想得到一个FormData对象,很简单: var fd = n

  • php上传文件并显示上传进度的方法

    本文实例讲述了php上传文件并显示上传进度的方法.分享给大家供大家参考.具体如下: 记得上传文件的时候要大点,不然还没看出来就上传完了,并且上传的文件不要太大,上G的就算了,2G的我试了,PHP受不了,我测试的是300多M的,记得要调整小php.ini参数啊 "选文件=>提交=>获取信息"要一气呵成哦^ ^ <?php $prefix = ini_get('session.upload_progress.prefix'); $name = ini_get('sessi

  • php实现简单的上传进度条

    php实现简单的上传进度条

    Web上传文件的三种解决方案分享给大家: 这里我要使用的是form法.通过为表单元素设置enctype="multipart/form-data"属性,让表单提交的数据以二进制编码的方式提交,在接收此请求的Servlet中用二进制流来获取内容,就可以取得上传文件的内容,从而实现文件的上传. 表单元素的enctype属性指定的是表单数据的编码方式,该属性有3个值: 在网上找到了两种方式,PHP配合apc实现和利用uploadprogress实现,这次我要使用的是uploadprogres

  • PHP使用HTML5 FileApi实现Ajax上传文件功能示例

    PHP使用HTML5 FileApi实现Ajax上传文件功能示例

    本文实例讲述了PHP使用HTML5 FileApi实现Ajax上传文件功能.分享给大家供大家参考,具体如下: FileApi是HTML5的一个新特性,有了这个新特性,js就可以读取本地的文件了,然后实现真正的Ajax上传文件了,而不是iframe方法,下面会介绍api的使用,以及实现Ajax上传文件: FileApi使用 定义上传控件: <input type="file" name="pic" onchange="selfile();"

  • PHP+Ajax实现上传文件进度条动态显示进度功能

    PHP+Ajax实现上传文件进度条动态显示进度功能

    说个前提:PHP配置文件中规定默认上传文件大小限制2M以下,如需上传大文件需同时更改php.ini中的upload_max_filesize和max_execution_time以及post_max_size的值. 主界面以及Ajax实现:index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传文件

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

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

  • php+html5使用FormData对象提交表单及上传图片的方法

    php+html5使用FormData对象提交表单及上传图片的方法

    本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法.分享给大家供大家参考.具体分析如下: FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台.在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量. 使用FormData对象 1.创建一个FormData空对象,然后使用append方法添加key/value 复制代码 代码如下: var formdata = new

  • php+html5+ajax实现上传图片的方法

    本文实例讲述了php+html5+ajax实现上传图片的方法.分享给大家供大家参考,具体如下: <?php if (isset($_POST['upload'])) { var_dump($_FILES); move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat'); //header('location: test.php'); exit; } ?> <!doctype html> <

  • PHP+Ajax无刷新带进度条图片上传示例

    PHP+Ajax无刷新带进度条图片上传示例

    项目需求:1.PHP+Ajax无刷新带进度条图片上传,2.带进度条.所需插件:jquery.js,jquery.form.js. 最近在做一个手机web项目,需要用到Ajax上传功图片能,项目要求PHP无刷新上传图片,并且要带进度条,下面就来讲一下我的实现方法,先看效果图 本示例需要使用的是jquery.js,jquery.form.js,demo里面包含有,你可以在文章下方进行下载. 第一步,建立前端页面index.html 此段是前端展示内容,这里需要说明的是由于input:file标签显示

  • php 使用html5实现多文件上传实例

    首先向大家介绍一下html5中file的multiple属性 定义和用法 multiple 属性规定输入字段可选择多个值.如果使用该属性,则字段可接受多个值. 实例: <form action="demo_form.asp" method="get"> Select images: <input type="file" name="img" multiple="multiple" />

  • php+html5实现无刷新图片上传教程

    php+html5实现无刷新图片上传教程

    本篇向大家介绍一种全新的上传图片的方式,利用html5的FileReader读取图片文件,然后将数据传输到服务器再使用PHP进行处理.实现过程如下(带图片预览功能) 前端html代码 upload,html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&qu

  • php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析

    本文实例讲述了php 下 html5 XHR2 + FormData + File API 上传文件操作.分享给大家供大家参考,具体如下: FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormData的最大优点就是我们可以异步上传一个二进制文件. 例1如下: <!DOCTYPE HTML> <html lang="zh-CN"

随机推荐