大文件上传进度条实现

喜欢ヅ旅行 2022-05-20 06:23 296阅读 0赞

#### 大文件上传进度条实现 ####

1.FormData对象提交表单

进行表单提交时，如果表单当中的域很多，使用DOM操作就比较麻烦。FormData可以一次性收集表单中的所有数据，包括文件域的数据，操作更方便。

2.调整允许上传文件大小

修改php.ini文件中允许POST表单上传的最大数据量：

![这里写图片描述][SouthEast]

修改php.ini文件中允许上传文件的最大大小：

![这里写图片描述][SouthEast 1]

3.onprogress事件

onprogress事件是 XMLHttpRequest的子对象XMLHttpRequestUpload中的一个事件，该事件大约每100ms向客户端返回一次数据，该数据中包含文件已上传大小loaded和总大小total。

xhr.upload.onprogress = function(evt){ 
      console.log(evt);  //evt是onprogress事件的对象
    }

4.进度条实现实例

前台HTML页面:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
        <div style="width:300px;height: 20px;border: 1px solid #CCC">
        
            <div id="jdt" style="height: 20px"></div>
        </div><br>
        <form action="" method="post" id="mainForm">
            选择文件：
            <input type="file" name="f">
            <input type="button" value="上传" onclick="upload()">
        </form>
        <script type="text/javascript"> function upload(){ // 获取表单对象 var fm = document.getElementById("mainForm"); // 实例化FormData对象 var fd = new FormData(fm); // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // console.log(xhr); // 调用open方法准备ajax请求 xhr.open('post','upfile.php'); var jdt = document.getElementById('jdt'); // 绑定onprogress事件 xhr.upload.onprogress = function(evt){ // console.log(evt); // toFixed修正结果，只保留小数点后两位 // 计算上传大小的百分比 percent = (evt.loaded / evt.total).toFixed(2); // 设置进度条样式 jdt.style.width = percent * 300 + 'px'; jdt.style.background = 'skyblue'; } xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ alert(xhr.responseText); } } // 发送ajax请求 xhr.send(fd); } </script>
    </body>
    </html>

后台PHP程序:

<?php 
    if($_FILES['f']['error'] ==0 ){
        // echo $_FILES['f']['name'];
        // 将$_FILES['f']['name']字符串由参数1的字符集，转为参数2的字符集
        $name = iconv('utf-8','gb2312',$_FILES['f']['name']);
        // 如果不进行转换的话，中文会产生乱码。因为我们的程序用的是utf-8，而windows系统用的是gb2312
    
        //参数1: 临时存放路径
        //参数2: 永久保存路径
        if(move_uploaded_file($_FILES['f']['tmp_name'],$name)){
            echo "上传成功";
        }else{
            echo "上传失败";
        }
    }else{
        echo "上传出错";
    }

转载自：https://blog.csdn.net/jianxq/article/details/78145362

[SouthEast]: /images/20220520/4932ab6f95ac4d3d87f26990fa0085e9.png
[SouthEast 1]: /images/20220520/989089c22b5f45b590c80ef1fc16d628.png