• 技术文章 >后端开发 >php教程

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

    藏色散人藏色散人2019-12-19 17:55:16转载1061
    6d6d62a4e772b1a4ccb41505b1f001b.png

    说个前提:

    PHP配置文件中规定默认上传文件大小限制2M以下,如需上传大文件需同时更改php.ini中的upload_max_filesize和max_execution_time以及post_max_size的值。

    相关推荐:《PHP教程

    主界面以及Ajax实现:

    index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>上传文件</title>
    <script type="text/javascript">
    function sub() {
    var obj = new XMLHttpRequest();
    obj.onreadystatechange = function() {
    if (obj.status == 200 && obj.readyState == 4) {
    document.getElementById('con').innerHTML = obj.responseText;
    }
    }
     
    // 通过Ajax对象的upload属性的onprogress事件感知当前文件上传状态
    obj.upload.onprogress = function(evt) {
    // 上传附件大小的百分比
    var per = Math.floor((evt.loaded / evt.total) * 100) + "%";
    // 当上传文件时显示进度条
    document.getElementById('parent').style.display = 'block';
    // 通过上传百分比设置进度条样式的宽度
    document.getElementById('son').style.width = per;
    // 在进度条上显示上传的进度值
    document.getElementById('son').innerHTML = per;
    }
     
    // 通过FormData收集零散的文件上传信息
    var fm = document.getElementById('userfile3').files[0];
    var fd = new FormData();
    fd.append('userfile', fm);
     
    obj.open("post", "upload.php");
    obj.send(fd);
    }
    </script>
    <style type="text/css">
    #parent {
    width: 200px;
    height: 20px;
    border: 2px solid gray;
    background: lightgray;
    display: none;
    }
    #son {
    width: 0;
    height: 100%;
    background: lightgreen;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <h2>Ajax实现进度条文件上传</h2>
    <div id="parent">
    <div id="son"></div>
    </div>
    <p id="con"></p>
    <input type="file" name="userfile" id="userfile3"><br><br>
    <input type="button" name="btn" value="文件上传" οnclick="sub()">
    </body>
    </html>

    php处理上传文件:upload.php

    <?php 
    // 上传文件进行简单错误过滤
    if ($_FILES['userfile']['error'] > 0) {
    exit("上传文件有错".$_FILES['userfile']['error']);
    }
     
    // 定义存放上传文件的真实路径
    $path = './upload/';
    // 定义存放上传文件的真实路径名字
    $name = $_FILES['userfile']['name'];
     
    // 将文件的名字的字符编码从UTF-8转成GB2312
    $name = iconv("UTF-8", "GB2312", $name);
     
    // 将上传文件移动到指定目录文件中
    if (move_uploaded_file($_FILES['userfile']['tmp_name'], $path.$name)) {
    echo "文件上传成功";
    } else {
    echo "文件上传失败";
    }
     ?>

    以上就是PHP+Ajax如何实现上传文件进度条动态显示进度的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:PHP
    上一篇:PHP中常用的加密解密方法总结 下一篇:PHP 服务器端处理跨域问题
    大前端线上培训班

    相关文章推荐

    • PHP-xml & jsonp转数组的方法• PHP-Ajax实现异步上传图片到新浪图床• php调取摄像头实现拍照功能的方法• PHP中常用的加密解密方法总结

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网