PHP Ajax,FormData收集表单数据(大文件)，显示文件上传进度条

最新推荐文章于 2025-03-10 10:24:41 发布

houyanhua1

最新推荐文章于 2025-03-10 10:24:41 发布

阅读量1.4k

点赞数

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79195303

版权

JavaScript 同时被 3 个专栏收录

140 篇文章

订阅专栏

PHP

130 篇文章

订阅专栏

Ajax

23 篇文章

订阅专栏

php.ini 设置开放大附件上传限制：

06-reg_progress.html（前端FormData收集表单数据(文件)Ajax提交,显示文件上传进度条）:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript">
        window.onload = function(){
            var fm = document.getElementsByTagName('form')[0];
            fm.onsubmit = function(evt){
                //① 收集表单信息 FormData
                var fd = new FormData(this);
                //② ajax传递表单信息到服务器
                var xhr = new XMLHttpRequest();

                //console.log(xhr);
                //通过xhr.upload.onprogress事件感知附件上传情况，每100毫秒触发一次onprogress事件
                xhr.upload.onprogress = function(event){
                    //通过事件对象event感知附件上传情况
                    //console.log(event);//每间隔100ms左右就输出一次
                    //获得已经上传大小 与 总大小的比值
                    var loaded = event.loaded;  //已经上传的大小
                    var total = event.total;    //总大小
                    var per = Math.floor((loaded/total)*100)+"%";  //上传百分比
                    //把上传百分比设置给id=son的样式width宽度
                    document.getElementById('son').innerHTML = per;
                    document.getElementById('son').style.width = per;
                }

                xhr.onreadystatechange = function(){
                    if(xhr.readyState==4){
                        alert(xhr.responseText);
                    }
                }
                xhr.open('post','./06.php');
                xhr.send(fd);

                evt.preventDefault(); //阻止浏览器form提交动作
            }
        }
        </script>
        <style type="text/css">
        #pat {width:450px; height:35px; border:5px solid blue;}
        #son {width:0; height:100%; background-color:lightblue;}
        </style>
    </head>
    <body>
        <h2>上传大附件进度条设置</h2>
        <form method="post" action="">
            <p>用户名：<input type="text" id="username" name="mingzi" /></p>
            <p>密码：<input type="password" id="userpwd" name="mima" /></p>
            <p>邮箱：<input type="text" id="useremail" name="youxiang" /></p>
            <div id="pat"><div id="son"></div></div>
            <p>媒体文件：<input type="file" id="userpic" name="touxiang" /></p>
            <p><input type="submit" value="注册" /></p>
        </form>
    </body>
</html>

06.php（后端接收保存文件）:

<?php

//接收ajax传递过来的form表单信息
//① 普通表单域信息
//② 上传的文件信息
//echo "post";
//print_r($_POST);
//exit;
//echo "file:";
//print_r($_FILES);

if($_FILES['touxiang']['error']>0){
    exit('附件有错误');
}

//附件上传逻辑
//A. 附件存储目录 和 名字
$dir = "./upload/";
//附件后缀
$ext = substr($_FILES['touxiang']['name'],strrpos($_FILES['touxiang']['name'],"."));
$name = date("YmdHis").'-'.mt_rand(1000,9999).$ext;
$dir_name = $dir.$name;

//B. move_uploaded_file() 把附件从"临时路径名"移动到"真实路径名"
if(move_uploaded_file($_FILES['touxiang']['tmp_name'],$dir_name)){
    echo "success";
}else{
    echo "fail";
}