首页 > 作文

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

更新时间:2023-04-08 15:40:08 阅读: 评论:0

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

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

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

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

1.下载的progr感恩父亲节的图片ess事件属于xmlhttprequest对象
2.上传的progress事件属于xmlhttprequest.upload对象。

与progress事件相关的,还有其他五个事件:

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

<!doctype html><html lang="zh-cn"><head>  <meta chart="utf-8">  <title></title></head><body>  <form method="post" id="myform">    <input type="file" name="file" i基础医学d="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.respontext);      }    };    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.nd(fd);    return fal;  };</script></html>

upfile.php代码如下:

<?php$uploaddir = './upload/';if(!file_exists($uploaddir)) {  @mkdir($uploaddir, 0777, true);}$uploadfile = $uploaddir . baname($_files['file']['name']);if(move_uploaded_file($_files['file']['tmp_name'], $uploadfile)) {  echo "ok";} el {  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

本文发布于:2023-04-08 15:40:06,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/524f3a5de30c243b0c21b5e0bbb10473.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:php 使用html5 XHR2实现上传文件与进度显示功能示例.doc

本文 PDF 下载地址:php 使用html5 XHR2实现上传文件与进度显示功能示例.pdf

标签:事件   上传   对象   数据
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图