<!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. 转：Node.js软肋之CPU密集型任务

    文章来自于:http://www.infoq.com/cn/articles/nodejs-weakness-cpu-intensive-tasks Node.js在官网上是这样定义的:“一个搭建在C ...

  2. 转：Java反射教程

    原文来自于:http://www.importnew.com/9078.html 什么是反射?反射有什么用处? 1. 什么是反射? “反射(Reflection)能够让运行于JVM中的程序检测和修改运 ...

  3. DBUtils框架

    一.O-R Mapping 简介    一]概念:可以理解为对象和数据库的映射.    二]常用O-R Mapping映射工具        1)Hibernate(全自动框架)        2)l ...

  4. RazorEngine 学习笔记

    refer : https://github.com/Antaris/RazorEngine 微软的模板编辑器. Install-Package RazorEngine using RazorEngi ...

  5. uva 10014 Simple calculations

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  6. 为什么设计模式在C++社区没有Java社区流行?

    我们发现设计模式在Java社区很流行,但是在C++社区却没有那么被关注,甚至有点被排斥,究竟是什么原因造成这个差异的呢?    昨天和同事讨论这个问题,最后得出几点原因:     (1)C++内存需要 ...

  7. Android listview局部刷新和模拟应用下载(zhu)

    在android开发中,listview是比较常用的一个组件,在listview的数据需要更新的时候,一般会用notifyDataSetChanged()这个函数,但是它会更新listview中所有可 ...

  8. [Operationg System Labs] 我对 Linux0.00 中 boot.s的理解和注释

    (如有错误请立即指正,么么哒!) !    boot.s!! It then loads the system at 0x10000, using BIOS interrupts. Thereafte ...

  9. webpack之基础学习

    webpack工作原理: 通过一个入口文件,main.js开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件. Webpack的核心原理 ...

  10. memcached几个easy被忽略但很实用的命令

    一.CAS和GETS Memcached从1.2.4版本号新增CAS(Check and Set)协议,用于处理同一个ITEM(key-value)被多个session更新改动时的数据一致性问题. 如 ...