<!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>分割大文件上传</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

    #test{

        width: 200px;

        height: 100px;

        border: 1px solid green;

        display: none;

    }

    #img{

        width: 50px;

        height: 50px;

        display: none;

    }

    #upimg{

        text-align: center;

        font: 8px/10px '微软雅黑','黑体',sans-serif;

        width: 300px;

        height: 10px;

        border: 1px solid green;

    }

    #load{

        width: 0%;

        height: 100%;

        background: green;

        text-align: center;

    }

</style>

</head>

    <body>

        <form enctype="multipart/form-data" action="file.php" method="post">

            <!--

            <input type="file" name="pic" />

            <div id="img"></div>

            <input type="button" value="uploadimg" onclick="upimg();" /><br />

            -->

            <div id="upimg">

                <div id="load"></div>

            </div>

            <input type="file" name="mof" multiple="multiple"/>

            <input type="button" value="uploadfile" onclick="upfile();" />

            <input type="submit" value="submit" />

        </form>

        <div id="test">

            测试是否DIV消失

        </div>

<script type="text/javascript">

    var dom=document.getElementsByTagName('form')[0];

    dom.onsubmit=function(){

        //return false;

    }

    var xhr=new XMLHttpRequest();

    var fd;

    var des=document.getElementById('load');

    var num=document.getElementById('upimg');

    var file;

    const LENGTH=10*1024*1024;

    var start;

    var end;

    var blob;

    var pecent;

    var filename;

    //var pending;

    //var clock;

    function upfile(){

        start=0;

        end=LENGTH+start;

        //pending=false;

        file=document.getElementsByName('mof')[0].files[0];

        //filename = file.name;

        if(!file){

            alert('请选择文件');

            return;

        }

        //clock=setInterval('up()',1000);

        up();

    }

    function up(){

        /*

        if(pending){

            return;

        }

        */

        if(start<file.size){

            xhr.open('POST','file.php',true);

            //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

            xhr.onreadystatechange=function(){

                if(this.readyState==4){

                    if(this.status>=200&&this.status<300){

                        if(this.responseText.indexOf('failed') >= 0){

                            //alert(this.responseText);

                            alert('文件发送失败，请重新发送');

                            des.style.width='0%';

                            //num.innerHTML='';

                            //clearInterval(clock);

                        }else{

                            //alert(this.responseText)

                            // pending=false;

                            start=end;

                            end=start+LENGTH;

                            setTimeout('up()',1000);

                        }

                    }

                }

            }

            xhr.upload.onprogress=function(ev){

                if(ev.lengthComputable){

                    pecent=100*(ev.loaded+start)/file.size;

                    if(pecent>100){

                        pecent=100;

                    }

                    //num.innerHTML=parseInt(pecent)+'%';

                    des.style.width=pecent+'%';

                    des.innerHTML = parseInt(pecent)+'%'

                }

            }
　　　　　　　
　　　　　　　//分割文件核心部分slice

            blob=file.slice(start,end);

            fd=new FormData();

            fd.append('mof',blob);

            fd.append('test',file.name);

            //console.log(fd);

            //pending=true;

            xhr.send(fd);

        }else{

            //clearInterval(clock);

        }

    }

    function change(){

        des.style.width='0%';

    }

</script>

    </body>

</html>

file.php:

<?php

/****

    waited

****/

//print_r($_FILES);exit;

$file = $_FILES['mof'];

$type = trim(strrchr($_POST['test'], '.'),'.');

// print_r($_POST['test']);exit;

if($file['error']==0){

    if(!file_exists('./upload/upload.'.$type)){

        if(!move_uploaded_file($file['tmp_name'],'./upload/upload.'.$type)){

            echo 'failed';

        }

    }else{

        $content=file_get_contents($file['tmp_name']);

        if (!file_put_contents('./upload/upload.'.$type, $content,FILE_APPEND)) {

            echo 'failed';

        }

    }

}else{

    echo 'failed';

}

?>

1 运行：

2 选择2G文件测试:

3 完成并正常播放:

js大文件分割上传的更多相关文章

  1. PHP + JS 实现大文件分割上传

    服务器上传文件会有一定的限制.避免内存消耗过大影响性能,在 php.ini 配置文件中,有几个影响参数: upload_max_filesize = 2M //PHP最大能接受的文件大小 post_m ...

  2. Html5 突破微信限制实现大文件分割上传

    先来前端代码 <!DOCTYPE html> <html> <head> <meta name="viewport" content=&q ...

  3. formdata方式上传文件，支持大文件分割上传

    1.upload.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <h ...

  4. js大文件分块上传断点续传demo

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  5. nodeJs + js 大文件分片上传

    简单的文件上传 一.准备文件上传的条件: 1.安装nodejs环境 2.安装vue环境 3.验证环境是否安装成功 二.实现上传步骤 1.前端部分使用 vue-cli 脚手架,搭建一个 demo 版本, ...

  6. android下大文件分割上传

    由于android自身的原因,对大文件(如影视频文件)的操作很容易造成OOM,即:Dalvik堆内存溢出,利用文件分割将大文件分割为小文件可以解决问题. 文件分割后分多次请求服务. //文件分割上传 ...

  7. PHP大文件分割上传（分片上传）

    服务端为什么不能直接传大文件?跟php.ini里面的几个配置有关 upload_max_filesize = 2M //PHP最大能接受的文件大小 post_max_size = 8M //PHP能收 ...

  8. PHP实现大文件分割上传与分片上传

    转载:http://www.zixuephp.com/phpstudy/phpshilie/20170829_43029.html 服务端为什么不能直接传大文件?跟php.ini里面的几个配置有关 u ...

  9. PHP大文件分片上传的实现方法

    一.前言 在网站开发中,经常会有上传文件的需求,有的文件size太大直接上传,经常会导致上传过程中耗时太久,大量占用带宽资源,因此有了分片上传. 分片上传主要是前端将一个较大的文件分成等分的几片,标识 ...

随机推荐

  1. js中给函数传参函数时，函数加括号与不加括号的区别

    <!doctype html><html><head><script> function show() { alert("123") ...

  2. Sicily 1021. Couples

    题目地址:1021. Couples 思路: 想清楚了这道题其实很简单.利用夫妻出现的位置作为下标,并设为同一值,第一对夫妻值为1,第二对为2,以此类推,存储完毕即可进入下一步. 利用栈这个数据结构: ...

  3. 转： pthread_create()

    pthread_create函数 原型:int  pthread_create((pthread_t  *thread,  pthread_attr_t  *attr,  void  *(*start ...

  4. Gridview中修改某列的背景色

    Gridview中状态列的值是1,某列的背景是是绿色状态字段是:archivesStatus protected void gvInfo_RowDataBound(object sender, Gri ...

  5. AD14中如何定义PCB尺寸大小（不同于AD9和10）

    以前用的着软件基本都是停留在9和10,14用的少,虽然14增加了很多功能,但是也带来了不变,虽然可以打开各种其他格式的文件,但是有些地方的改动不容忽略,在一个完整的板子下来需要用到的每个地方的点也会有 ...

  6. rsyslog 日志服务器接收日志权限问题

    rsyslog 权限: 默认 [root@dr-mysql01 zjzc_log]# ls -ltr zj-frontend0*-access*27 -rw------- 1 root root 32 ...

  7. iOS之UITableView带滑动操作菜单的Cell

    制作一个可以滑动操作的 Table View Cell 本文翻译自 http://www.raywenderlich.com/62435/make-swipeable-table-view-cell- ...

  8. 重写boost内存池

    最近在写游戏服务器网络模块的时候,需要用到内存池.大量玩家通过tcp连接到服务器,通过大量的消息包与服务器进行交互.因此要给每个tcp分配收发两块缓冲区.那么这缓冲区多大呢?通常游戏操作的消息包都很小 ...

  9. 多次绑定click及ajax提交常用方法

    <script> $(document).ready(function() { //绑定click $(".exchange_ecv").bind("clic ...

  10. Jetty监控线程使用情况的配置

    Jetty监控线程使用情况配置 第一步,配置xml文件 jetty-monitor.xml 参数说明: threads: 线程池中的线程 busyThreads: 使用中的线程 idleThreads ...