简单好用的大文件上传Demo源码

最新推荐文章于 2024-05-19 15:32:24 发布

XenonQ

最新推荐文章于 2024-05-19 15:32:24 发布

阅读量3.2k

点赞数

分类专栏： php 文章标签： php 源码

本文链接：https://blog.csdn.net/XenonQ/article/details/79031017

版权

php 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #jdt{ width:300px; height:25px; }
        progress{ display:none;  width:200px; height:25px;  float:left;  }
        #sd{ float:left;  }
    </style>
    <script>
        /*
         我们用到的api有Blob，他的file里面有slice方法可以截取二进制对象的一部分。。
         而且我们需要修改php.ini文件，
         upload_max_filesize = 20M ---上传文件，单个文件的最大值
         post_max_size = 20M  post方式最大上传20M

         */
        function bfbs(bfb){
            var pro = document.getElementsByTagName('progress')[0];
            pro.style.display = 'block';
            pro.setAttribute('value',bfb);
            var sd = document.getElementById('sd');
            sd.innerHTML = bfb +'%';
        }
        var clock = null;

        xhr = new XMLHttpRequest();

        function upgo(){
            clock = window.setInterval(selefile,1000);
        }

        var selefile = (function(){
            const LENGTH = 10 * 1024 * 1024; //每次切割10M
            var sta = 0;
            var end = sta + LENGTH;
            var flag = false; //标识上一块正在上传中...
            var blob = null;
            var fd = null;
            var xhr = null;
            var bfb = 0;

            return (function(){
                if(flag == true){
                    return;
                }
                var up_file = document.getElementsByTagName('input')[0].files[0];
                //如果sta大于up_file.size那么就结束咯
                if(sta > up_file.size){
                    clearInterval(clock);
                    return false;
                }

                blob = up_file.slice(sta,end);
                var fd = new FormData();
                fd.append('part',blob);
                //请求后端
                up(fd);

                sta = end;
                end = sta + LENGTH;
                flag = false;

                //进队条
                bfb = Math.ceil(100 * end / up_file.size);
                bfb > 100 ? bfb = 100 : bfb = bfb;
                bfbs(bfb);
            });
        })();

        function up(fd){
            xhr.open('POST','./14.php',false);
            xhr.send(fd);
        }
    </script>
</head>
<body>

<div id="jdt"><progress max="100" value=""></progress><span id="sd"><span></div>
<input type="file" name="part" οnchange="upgo();" >
<div id="desc"></div>
</body>
</html>

封包

<?php
$file = $_POST['part'];
//file_get_contents('part');
if(!file_exists($file)){
    move_uploaded_file($_FILES['path']['tmp_name'],$file);
} else {
    file_put_contents($file,file_get_contents($_FILES['path']['tmp_name']),FILE_APPEND);
}
echo 'ok';
?>

XenonQ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单好用的大文件上传Demo源码

html页面html>html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> #jdt{ width:300px; height:25px; } progress{ display:none; width:200px; height:25px;
复制链接

扫一扫