<!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. CentOS 网络设置修改 指定IP地址 DNS 网关（转）

    CentOS 网络设置修改 指定IP地址 DNS 网关(实测 笔记)   环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G) 系统版本:Centos-6.5-x86_64 ...

  2. AudioServicesPlaySystemSound音频服务—备用

    对于简单的.无混音音频,AVAudio ToolBox框架提供了一个简单的C语言风格的音频服务.你可以使用AudioservicesPlaySystemSound函数来播放简单的声音.要遵守以下几个规 ...

  3. 网络请求时 返回 App Transport Security has blocked a cleartext HTTP

    如上图,是因为 Xcode7 没有对 plist 进行 http 请求的配置  所致 这时需要  加上上面的plist的红框中 的内容  并且 设置 为 yes  如下图

  4. mongodb and .net

    http://www.codeproject.com/Tips/684801/Connecting-NET-Application-to-MongoDB http://www.codeproject. ...

  5. 装饰者模式 (decorator pattern)

    参考 : Head First 设计模式(中文版) 这篇只作为个人温习! 用意 : 动态地给一个对象添加|扩展一些行为.Decorator 强调用对象组合而非继承来实现扩展,这显得较为灵活. 角色: ...

  6. 【转】[教程]隐藏ActionBar中的MenuItem

    原文网址:http://blog.csdn.net/appte/article/details/12104823 有时候我们需要在不同的时候改变ActionBar中MenuItem的项数,或者隐藏某些 ...

  7. matrix矩阵求逆 与解方程模板 留做备用 (有bug,待补充)

    // // main.cpp // 矩阵求逆 // // Created by 唐 锐 on 13-6-20. // Copyright (c) 2013年 唐 锐. All rights reser ...

  8. hdu 1402 A * B Problem Plus FFT

    /* hdu 1402 A * B Problem Plus FFT 这是我的第二道FFT的题 第一题是完全照着别人的代码敲出来的,也不明白是什么意思 这个代码是在前一题的基础上改的 做完这个题,我才 ...

  9. 动态sql语句

    当需要根据外部输入的参数来决定要执行的SQL语句时,常常需要动态来构造SQL查询语句,个人觉得用得比较多的地方就是执行搜索查询的SQL语句.对于搜索,可能要根据搜索条件判断来动态执行SQL语句. 在S ...

  10. SpringMVC 拦截器（interceptors）对样式（css），JavaScript（js），图片（images）链接的拦截

    因为在web.xml配置了 <servlet-mapping> <servlet-name>appServlet</servlet-name> <url-pa ...