zoukankan      html  css  js  c++  java
  • 大文件上传进度条实现

    大文件上传进度条实现

    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="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 "上传出错";
    }

  • 相关阅读:
    高级(线性)素数筛
    Dijkstra(迪杰斯特拉)算法
    简单素数筛
    【解题报告】 POJ1958 奇怪的汉诺塔(Strange Tower of Hanoi)
    4 jQuery Chatting Plugins | jQuery UI Chatbox Plugin Examples Like Facebook, Gmail
    Web User Control Collection data is not storing
    How to turn on IE9 Compatibility View programmatically in Javascript
    从Javascrip 脚本中执行.exe 文件
    HtmlEditorExtender Ajax
    GRIDVIEW模板中查找控件的方式JAVASCRIPT
  • 原文地址:https://www.cnblogs.com/idjl/p/9610540.html
Copyright © 2011-2022 走看看