js大文件分割上传

时间：2022-09-20 23:39:15
<!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 运行：

js大文件分割上传

2 选择2G文件测试:

js大文件分割上传

js大文件分割上传

3 完成并正常播放:

js大文件分割上传

js大文件分割上传

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

  1. PHP &plus; 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 &plus; 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. coreseek 安装及使用方法详解

    coreseek 安装及使用 一般站点都需要搜索功能,如果是php+mysql站点,建议选择coreseek,如果是java站点建议使用lucene,coreseek 是一款很好的中文全文检索/搜索软 ...

  2. 跨域调用webapi

    web端跨域调用webapi   在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...

  3. js学习心得之思维逻辑与对象上下文环境（一）

    html5 canvas矩形绘制实例(绘图有js 实现) html: <canvas id="myCanvas" width="200" height=& ...

  4. 关于网站IIS日志分析搜索引擎爬虫说明

    正文:iis默认的日志文件在C:\WINDOWS\system32\LogFiles中,下面是Seoer惜缘的服务器日志,通过查看,就可以了解搜索引擎蜘蛛爬行经过,如: 2008-08-19 00:0 ...

  5. NicEdit - WYSIWYG Content Editor&comma; Inline Rich Text Application

    NicEdit - WYSIWYG Content Editor, Inline Rich Text Application By calling the nicEditors.allTextarea ...

  6. nb-iot简介【转】

    转自:http://www.elecfans.com/tags/nb-iot/ 标签 > nb-iot nb-iot 关注 118人关注 提供NB-IoT技术特点,NB-IoT模块/芯片,NB- ...

  7. Logstash filter 插件之 grok

    本文简单介绍一下 Logstash 的过滤插件 grok. Grok 的主要功能 Grok 是 Logstash 最重要的插件.它可以解析任意文本并把它结构化.因此 Grok 是将非结构化的日志数据解 ...

  8. wxPython制作跑monkey工具（python3）-带显示设备列表界面

    一. wxPython制作跑monkey工具(python3)-带显示设备列表界面  源代码 Run Monkey.py #!/usr/bin/env python import wx import ...

  9. mac下安装debug坑

    mac默认情况下的php版本是很低的,当你直接用phpize的时候默认是使用mac默认安装的phpize版本,这个时候查看Phpinfo的时候是看不到xdebug的,这时候查看错误日志会收到这样的报错 ...

  10. maven项目中，lib目录下有自己私有的包，则需要配置一下代码，然后进行打包

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compi ...

相关文章