2点多接了个电话导致失眠，没办法，跑起来接着板砖了。。。。。。

废话不多说，直接走码。。。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #jdt{ width:300px; height:25px; }

        progress{ display:none;  width:200px; height:25px;  float:left;  }

        #sd{ float:left;  }

    </style>

    <script>

        /*

            我们用到的api有Blob，他的file里面有slice方法可以截取二进制对象的一部分。。

            而且我们需要修改php.ini文件，

            upload_max_filesize = 20M ---上传文件，单个文件的最大值

            post_max_size = 20M  post方式最大上传20M

        */

        function bfbs(bfb){

            var pro = document.getElementsByTagName('progress')[0];

            pro.style.display = 'block';

            pro.setAttribute('value',bfb);

            var sd = document.getElementById('sd');

            sd.innerHTML = bfb +'%';

        }

        var clock = null;

        xhr = new XMLHttpRequest();

        function upgo(){

            clock = window.setInterval(selefile,1000);

        }

        var selefile = (function(){

            const LENGTH = 10 * 1024 * 1024; //每次切割10M

            var sta = 0;

            var end = sta + LENGTH;

            var flag = false; //标识上一块正在上传中...

            var blob = null;

            var fd = null;

            var xhr = null;

            var bfb = 0;

            return (function(){

                if(flag == true){

                    return;

                }

                var up_file = document.getElementsByTagName('input')[0].files[0];

                //如果sta大于up_file.size那么就结束咯

                if(sta > up_file.size){

                    clearInterval(clock);

                    return false;

                }

                blob = up_file.slice(sta,end);

                var fd = new FormData();

                fd.append('part',blob);

                //请求后端

                up(fd);

                sta = end;

                end = sta + LENGTH;

                flag = false;

                //进队条

                bfb = Math.ceil(100 * end / up_file.size);

                bfb > 100 ? bfb = 100 : bfb = bfb;

                bfbs(bfb);

            });

        })();

        function up(fd){

            xhr.open('POST','./14.php',false);

            xhr.send(fd);

        }

    </script>

</head>

<body>

    <div id="jdt"><progress max="100" value=""></progress><span id="sd"><span></div>

    <input type="file" name="part" onchange="upgo();" >

    <div id="desc"></div>

</body>

</html>

这里为了实现兼容谷歌没办法，只能使用闭包方法来写了。。。。。。

效果如下所示。。。

经测试火狐的效果本人感觉比谷歌的酷，嘻嘻。。。

AJAX-----16HTML5实现大文件切割上传的更多相关文章

  1. Ajax+Java实现大文件切割上传

    技术体系:html5(formdata) + java + servlet3.0+maven + tomcat7 <!DOCTYPE html> <html> <head ...

  2. 支持IE低版本的上传 大文件切割上传 断点续传 秒传

    1. http://files.cnblogs.com/files/blackice/UploadDemo.rar 此demo是使用的 swfupload 2.http://download.csdn ...

  3. AJAX大文件切割上传以及带进度条。

    分块传输的原理就是利用HTML5新增的文件slice截取函数. 代码如下: html: <input id="f" type="file" name=&q ...

  4. vue大文件分片上传插件

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  5. 利用blob对象实现大文件分片上传

    首先说分片上传,我们在进行文件上传的时候,因为服务器的限制,会限制每一次上传到服务器的文件大小不会很大,这个时候我们就需要把一个需要上传的文件进行切割,然后分别进行上传到服务器. 假如需要做到这一步, ...

  6. js实现大文件分片上传的方法

    借助js的Blob对象FormData对象可以实现大文件分片上传的功能,关于Blob和FormData的具体使用方法可以到如下地址去查看FormData 对象的使用Blob 对象的使用以下是实现代码, ...

  7. Node + js实现大文件分片上传基本原理及实践(一)

    _ 阅读目录 一:什么是分片上传? 二:理解Blob对象中的slice方法对文件进行分割及其他知识点 三. 使用 spark-md5 生成 md5文件 四. 使用koa+js实现大文件分片上传实践 回 ...

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

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

  9. Webuploader 大文件分片上传

    百度Webuploader 大文件分片上传(.net接收)   前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片 ...

随机推荐

  1. CentOS转的服务器磁盘规划

    我的服务器是500G.最重要的是/var分区一定要大(不论postfix邮件,还是LAMP的WEB 服务器等).最好是400G以上.具体的/boot 只要100M就足够了.下面是我的分区方案:硬盘50 ...

  2. javascript原型方法

    function createXMLHttp() { if(window.XMLHttpRequest){ return new XMLHttpRequest(); } else if(window. ...

  3. tomcat 设置根目录访问

    from http://nj-apple-tree.iteye.com/blog/1635953 1,设置跟路径时,三种方式 在Tomcat默认安装后,tomcat的主目录是webapps/root目 ...

  4. android-对话框

    一.常用对话框 AlertDialog: 功能最丰富,实际应用最广的对话框(以下三种对话框都是该对话框的子类) ProgressDialog:进度对话框.这个对话框只是对进度条的包装 DatePick ...

  5. 关于JS的算法

    一.快速排序 function qSort(arr) { if(arr.length === 0) { return []; } var left = []; var right = []; var ...

  6. Javascript 编程小技巧总结（部分内容借鉴他人）

    1 – 使用===,而不是＝＝ ==(或!=)操作符在需要的时候会自动执行类型转换.===(或!==)操作不会执行任何转换.它将比较值和类型,而且在速度上也被认为优于==. 2 – 使用闭包实现私有变 ...

  7. AJAX 后台返回多种数据

    前台ajax(jsp文件): (1) $.ajax({ type: "POST", url: "/dragable/demo/finishTopo", asyn ...

  8. H5学习小结——div+css创建电子商务静态网页

    使用Sublime Text软件编写电子商务类网站静态形式首页 经过差不多一星期的学习,基本掌握了div+css的用法之后,开始了实战练习.首先要做的就是要练习一下一般电子商务网页的编写,我做的是下图 ...

  9. 本地数据库（SQL Server）远程连接服务器端服务器

    本地数据库(SQL Server 2012) 连接外网服务器的数据库,外网的服务器端需要做如下配置: 1. 首先是要打开 数据的配置管理工具 2. 配置相关的客户端协议,开启TCP/IP 3. 数据库 ...

  10. bzoj3732: Network--kruskal最小生成树+LCA

    这是一道写起来比较顺手的题目 没有各种奇怪的细节,基本就是Kruskal和倍增LCA的模板.. 题目大意:对于一个无向带权图,询问两点之间一条路,使得这条路上的最长边最小,输出最小最长边的的值 那么既 ...