大文件上传进度条实现

来源：互联网发布：java 线程池队列大小编辑：程序博客网时间：2024/06/05 23:03

大文件上传进度条实现

1.FormData对象提交表单

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

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

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

这里写图片描述

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

这里写图片描述

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 进度条的整体视觉和位置设置 -->    <div style="width:300px;height: 20px;border: 1px solid #CCC">    <!-- 内层div  逐渐递增的进度条 -->        <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 "上传出错";}

阅读全文

0 0