<!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. Oracle 存储过程介绍

    存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 IS 3 BEGIN 4 NULL; 5 END; 行1: CREATE OR REPLACE PROCEDURE ...

  2. JSP与Servlet之间传值

    Jsp与Servlet之间的传值有两种,一种是Jsp传值给Sevlet,另一种是Servlet传值给Jsp:使用request.response对象完成传值,具体实现如下: 1.JSP传值给Servl ...

  3. CentOS安装MySQL问题汇总

    遇到的错误 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO) denied for ...

  4. Valve开源了Direct3D到OpenGL的转译层,方便开发者迁移游戏到Linux（面向游戏玩家的六款最佳 Linux 发行版）

    Valve开源了Direct3D到OpenGL的转译层,方便开发者迁移游戏到Linux:https://github.com/ValveSoftware/ToGL Valve SteamBox主机系统 ...

  5. crontab,at命令,常见问题

    crontab命令 前 一天学习了 at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系统则是由 cron (crond) 这个系统服务来控制的. Linux 系统上面原本就有非常 ...

  6. LeetCode 6. ZigZag Conversion Question

    题意:给你一个字符串和行数numRows,要求把该字符串变成一个"之"字形状后,按行数输出该字符串. 例子:"ABCDEFGHIJKLMNO", 4. 该字符串 ...

  7. INTELLIJ IDEA集成CHECKSTYLE（转）

    转自:http://www.cnblogs.com/kiwi-wang/p/4166410.html 本文中使用intelliJ IDEA版本为14.0.1,其他版本差异不大,可同样安装. 下载安装C ...

  8. openwrt上opkg更新报错&quot;opkg_download: Failed to download .............&quot;

    開始搞op的时候,看到op居然能够直接安装一些插件.激动坏了,由于这东西对嵌入式的小系统来说简直不敢想,可是op就支持了,就是这么任性. 好不easy编译了固件.依照网上的教程.telnet进去.首先 ...

  9. Android 基于Netty的消息推送方案之对象的传递（四）

    在上一篇文章中<Android 基于Netty的消息推送方案之字符串的接收和发送(三)>我们介绍了Netty的字符串传递,我们知道了Netty的消息传递都是基于流,通过ChannelBuf ...

  10. Java基础知识强化48：Java中哈希码

    1.概念:      哈希其实只是一个概念,没有什么真实的指向.它的目的是保证数据均匀的分布到一定的范围内.所以不同数据产生相同的哈希码是完全可以的.      现在是站在JAVA虚拟机的角度来看内存 ...