酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
【ECS精选特惠】新用户上云低至1折起
百度资源

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

来源:互联网搜集 作者:秩名 人气: 发布时间:2020-03-03
本篇文章主要介绍了php使用html5 XHR2实现上传文件与进度显示功能的方法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

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

在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

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.cnblogs.com/jkko123/p/6294582.html

相关文章

  • TP5框架实现签到功能的方法

    TP5框架实现签到功能的方法

    基于tp5 模型的一个签到功能; 由于存储所有的签到日期数据库会非常庞大,所以签到日期只存储近三个月的。 具体功能: 1、记录最近一次的签到时间 2、每次签到都会添加15积分 3、有连续签到的记录 CREATE TABLE `sp_sign` ( `id` int(11)......
    04-05
  • TP5框架实现一次选择多张图片并预览

    TP5框架实现一次选择多张图片并预览

    点击选择图片(可选多张),确定后将选择的图片显示在页面上,已经选择的图片也可以删除,点击提交将图片提交给后台。 1、效果图 2、code 用input标签并选择type=file,记得带上multiple,不然就只能单选图片了 如果不想通过 ajax 提交,一......
    04-04
  • 使用Entrust扩展包在laravel中实现RBAC的功能的方法

    使用Entrust扩展包在laravel中实现RBAC的功能的方法

    想要在Laravel中使用Entrust,首先需要通过Composer来安装其依赖包: composer require zizaco/entrust 5.2.x-de 安装完成后需要在config/app.php中注册服务提供者到providers数组: Zizaco\Entrust\EntrustServiceProvider::class, 同时......
    03-17
  • Laravel框架下的Contracts契约详解

    Laravel框架下的Contracts契约详解

    Contracts Laravel 的契约是一组定义框架提供的核心服务的接口, 例如我们在介绍用户认证的章节中到的用户看守器契约IllumninateContractsAuthGuard 和用户提供器契约IlluminateContractsAuthUserProvider以及框架自带的App\User模型所实......
    03-17
  • YII2框架中behavior行为的理解与使用方法的介绍

    YII2框架中behavior行为的理解与使用方法的介绍

    YII2中的行为说白了就是对组件功能的扩展,在不改变继承关系的条件下。 行为附加到组件后,行为将注入自已的方法和属性到组件,可以像组件访问自定义的方法和属性一样访问行为。 注意行为是对功能的扩展,不要乱用行为,比如有一个动物类......
    03-14
  • PHP代码加密方法的介绍

    PHP代码加密方法的介绍

    如何保护自己的PHP代码: 代码混淆+加密 实际加密算不上,具体实现思路就是把代码base64加密,然后对base64里的字符串进行字符串映射(随机生成字典混淆)然后eval执行 这种百分之百能被破解还原 代表代码如下: ?php function RandAbc($......
    03-14
  • YII2框架中验证码的简单使用方法

    YII2框架中验证码的简单使用方法

    验证码的使用是比较频繁的。YII2中已经帮我们做好了封装。 首先我们在控制器里创建一个actions方法,用于使用yii\captcha\CaptchaAction ?php namespace app\controllers; use YII;use yii\web\Controller; class IndexController extend......
    03-12
  • php实现账号不能同时登陆的方法【当其它地方登陆时,当前账号失效

    php实现账号不能同时登陆的方法【当其它地方登陆时,当前账号失效

    解决的思路是每当用户登陆时我们必需记录当前的用户id和session_id,如果有人在其它地方用此账号登陆时,我们把此用户id对应的session_id的session文件删除,并重新记录当前的session_id。那么之前的用户就失效了。 login.php代码如下: ......
    03-05
  • php输出缓冲Output Control的用法

    php输出缓冲Output Control的用法

    关于php的输出缓冲,首先要说明的是什么是缓冲(buffer),比如我们通过记事本在编辑文件的时候,并不是我们输入了内容,系统就会立刻向磁盘中写入数据。 只有我们在保存文件后,系统才会向磁盘写入数据。而之前我们输入的内容全部保存在了......
    03-03
  • php使用html5 XHR2实现上传文件与进度显示功能的方法

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

    思路:只要我们知道上传文件的总大小,还有上传过程中上传文件的大小,那么就可以实现进度显示了。 在html5中,XMLHttpRequest对象,传送数据的时候,progress事件用来返回进度信息。 它分成上传和下载两种情况 1.下载的progress事件属于......
    03-03

最新更新