js无刷新上传大文件

这个是看了网上一个的,具体链接忘记了,我手动测试了下

注意:不支持移动端,在安卓和ios上面上传直接卡死了(百度一款大文件上传插件可以参考,兼容了移动端)

直接上demo:

前端html和js部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>练习ajax带进度条切割上传大文件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
        #par{width: 500px;height: 50px;border: 1px solid purple;}
        #sub{width: 0;height: 50px;background-color: gray;}
</style>
</head>
    <body>
            <div id='par'>
                    <div id='sub'></div>
            </div>
            <p><input type="file" name='file' /></p>
            <input type="button" value='提交' onclick='fire();' />
    </body>
    <script>
            var xhr = new XMLHttpRequest();
            var clock = null;
            function fire(){
                    clock = window.setInterval(upfile,1000); //每一秒触发一次upfile函数
            }
            var upfile = (function(){
                const LENGTH = 1 * 1024 * 1024; //定义每一次分割的文件的大小
                var start = 0;
                var end = start + LENGTH;
                var fd = null;
                var flag = false; //flag标志当前是否有文件在上传中
                var percent = 0;
                return (function(){
                    /*如果有文件在上传则不进行操作,因为上次没传完就开始下次时会导致合并的文件衔接不上*/
                    if(flag == true){ 
                        return;
                    }
                    var file = document.getElementsByName('file')[0].files[0];
                    if(start > file.size){ //所有分块上传完成跳出函数清除计数器
                        clearInterval(clock);
                        alert('上传完成了');
                        return;
                    }
                    bloba = file.slice(start,end); //每10M分割一次文件
                    fd = new FormData();
                    fd.append('file',bloba);
                    fd.append('filename',file.name);
                    //其他参数
                    fd.append('name','wanghao');
                    fd.append('appkey','das');
                    up(fd);
                    /*监听上传过程,定时器触发upfile函数时若是flag为true则不进行操作以免文件上传合并的时候出问题*/
                    xhr.upload.onprogress = function(ev){
                        if(ev.loaded < LENGTH){
                            flag = true;
                        }
                    }
                    percent = 100 * end / file.size;
                    if(percent > 100){
                        percent = 100;
                    }
                    document.getElementById('sub').style.width = percent + '%';
                    document.getElementById('sub').innerHTML = parseInt(percent)+ '%';
                    start = end;
                    end = start + LENGTH ;
                    flag = false; //当前分块上传完成,flag置false

                });
            })();
            function up(fd){
                    //采用同步上传防止文件写入时顺序出错
                    xhr.open('POST','./11.php',false);
                    xhr.send(fd);
            }

    </script>
</html>

后台php部分:

<?php

$save_file_name = './upload/'.$_POST['filename']; //保存的文件名

if(file_exists($save_file_name)){ //第一次收到上传的分割文件
    //如果文件已存在,即文件至少第二次被分割上传至此
    file_put_contents($save_file_name, file_get_contents($_FILES['file']['tmp_name']) ,FILE_APPEND);//参数FILE_APPEND表示继续追加到文件而不是覆盖
}else{
    $ddd = move_uploaded_file($_FILES['file']['tmp_name'], $save_file_name);
    // file_put_contents('./1.txt', 'NNNNN'.time().'____'.json_encode($ddd)."\r\n",FILE_APPEND);
}

posted @ 2018-06-01 14:50 孤独的DNA 阅读(600) 评论(0) 收藏举报

刷新页面返回顶部