Ajax+FormData实现大附件上传带进度条

最新推荐文章于 2025-06-22 14:51:47 发布

原创最新推荐文章于 2025-06-22 14:51:47 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #FormData #附件上传 #进度条

web前端专栏收录该内容

46 篇文章

订阅专栏

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

这里写图片描述

2.ajax对象.upload.onprogress事件：
这里写图片描述

3.上传附件代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">

            function f1(){
                var mypic = document.getElementById('myhead').files[0];
                //创建一个FormData空对象，然后使用append方法添加key/value
                var fd = new FormData();
                fd.append("myhead",mypic);

                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState==4 && xhr.status==200){
                        alert(xhr.responseText);
                    }
                }

                //侦查当前附件上传情况
                xhr.upload.onprogress = function(evt){
                    //侦查附件上传情况
                    //通过事件对象侦查
                    //该匿名函数表达式大概0.1秒执行一次

                    var loaded = evt.loaded;//已经上传大小情况
                    var tot = evt.total;//附件总大小
                    var per = Math.floor(100*loaded/tot);  //已经上传的百分比
                    var son =  document.getElementById('son');
                    son.innerHTML = per + "%";
                    son.style.width = per + "%";
                }

                xhr.open("post","./005.php");
                xhr.send(fd);
            }

            //立刻显示被上传的图片
            function f2(){
                //利用files获得被上传附件(图片)信息
                var mypic = document.getElementById('myhead').files[0];
                //利用mypic获得图像的url地址(二进制源码)
                //URL  html5新标准属性
                //window.URL.createObjectURL(mypic);
                document.getElementsByTagName('img')[0].src = window.URL.createObjectURL(mypic);
            }
        </script>

        <style type="text/css">
            #parent{width:400px; height:20px; border:2px solid red;}
            #son {width:0; height:100%; background-color:lightgreen; text-align:center; line-height:20px; font-size:16px; font-weight:bold;}
        </style>
    </head>


<body>
    <div id="parent"><div id="son"></div></div>
    用户头像：<input type="file" id="myhead" name="myhead" onchange="f2()"/><br />
    <img src="" alt="" width="200" height="150"/><br />
    <input type="button" value="上传头像" onclick="f1()" /><br />
</body>
</html>

4.后端服务器页面：

//005.php
<?php
//判断附件是否有问题
if($_FILES['myhead']['error'] > 0){
    exit('附件有异常问题');
}

//（1）附件的存储位置、附件名
$path = "./upload/";
$name = $_FILES['myhead']['name'];//附件的原名字是二维数组元素

$truename = $path.$name;

//（2）把附件从“临时路径位置”移动到“真实位置”     move_uploaded_file()
$is_uploaded = move_uploaded_file($_FILES['myhead']['tmp_name'], $truename);//会返回boolean值
if($is_uploaded){
    echo "upload success";
}else{
    echo "upload fail";
}