<?php header('Content-type:text/html;charset=UTF-8'); ?>

<?php
if ($_FILES) { if(!file_exists('./uploads/123.zip')) {
move_uploaded_file($_FILES['part']['tmp_name'],'./uploads/123.zip');
} else {
file_put_contents('./uploads/123.zip',file_get_contents($_FILES['part']['tmp_name']),FILE_APPEND);
unlink($_FILES['part']['tmp_name']);
} echo 'ok';
exit;
}
?> <h1>html5大文件切割上传</h1>
<div id="bar" style="">
<span id="progress">0%</span>
</div> <input name="mov" type="file" />
<input id="btn" type="button" value="点我" /> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function() {
sendfile();
});
}) function sendfile() {
const LENGTH = 1024 * 1024;
var sta = 0;
var end = sta + LENGTH;
var blob = null;
var fd = null; /*
xhr 对象
*/
var xhr = null; var mov = document.getElementsByName('mov')[0].files[0];
//console.log(mov);return; var totalsize = mov.size;
var percent = 0; // while(sta < totalsize) {
timer = setInterval(function(){
if (sta>totalsize) {
clearInterval(timer);
};
blob = mov.slice(sta,end);
fd = new FormData();
fd.append('part',blob); xhr = new XMLHttpRequest();
xhr.open('POST',"",false); xhr.send(fd); sta = end;
end = sta + LENGTH; percent = 100 * end / totalsize;
if(percent > 100) {
percent = 100;
}
// document.getElementById('bar').style.width = percent + '%';
// $('#bar').width(percent+'%');
$('#bar').css({'width':percent+'%', 'background-color':'red'});
$('#progress').html(parseInt(percent)+'%');
},1) // } } </script>

  

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

  1. js大文件分块上传断点续传demo

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  2. nodeJs + js 大文件分片上传

    简单的文件上传 一.准备文件上传的条件: 1.安装nodejs环境 2.安装vue环境 3.验证环境是否安装成功 二.实现上传步骤 1.前端部分使用 vue-cli 脚手架,搭建一个 demo 版本, ...

  3. C# 用原生JS进行文件的上传

    1.此文章是用原生JS来进行文件的上传,有两个版本,一个不用ajax,一个用ajax. 1)非AJAX <!DOCTYPE html> <html> <head> ...

  4. js实现文件的上传和输出,拖拽上传图片

    js文件上传 文件下载 以前的文件的下载都是在服务器,现在也是放在服务器比较好,有时候为了一些开发的方便,我们临时把处理的数据就放在了本地,然后自己访问.这个也是可以的. 1.利用html5的 Fil ...

  5. Ext.js多文件选择上传,

    工作了之后来到了一家用Ext.js的公司, 一开始的时候做项目, 我被分给一个做一个单表的增删改查, 再加上文件上传功能, 带我的老师让我自己研究一下Ext.js怎么多文件选择上传, 并且能获取到上传 ...

  6. asp.net 基于ajaxfileupload.js 实现文件异步上传

    前台代码: /*修改头像*/       //上传       function _sc() {           $(".ckfile").html("") ...

  7. 文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)--SNF快速开发平台3.0

    实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制, ...

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

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

  9. js文件夹上传下载组件

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

随机推荐

  1. Android中this.*与*.this还有*.class的区别是什么?

    这些是java的基础知识.首先this代表本类的一个引用,this.*表示调用本类的某个方法,这个时候通常可以省略this:但在内部类中不能省略,否则编译器会认为是内部类的引用,所以要在this前加上 ...

  2. hadoop实例---多表关联

    多表关联和单表关联类似,它也是通过对原始数据进行一定的处理,从其中挖掘出关心的信息.如下 输入的是两个文件,一个代表工厂表,包含工厂名列和地址编号列:另一个代表地址表,包含地址名列和地址编号列.要求从 ...

  3. 小白日记40:kali渗透测试之Web渗透-SQL手工注入(二)-读取文件、写入文件、反弹shell

    SQL手工注入 1.读取文件[load_file函数] ' union  SELECT null,load_file('/etc/passwd')--+ burpsuite 2.写入文件 ' unio ...

  4. hive-安装MySQL(centos6.4)

    为安装hive做准备,以前装过无数次,在线的.tar包的,一直不用忘得差不多了. centos6.4 虚拟机 先看有没有装,有的话应该是自带的,卸载就可以了 命令分别是 然后在线安装,命令是 (-y是 ...

  5. 使用OPC的方式去连接PLC进行AB SLC-5_04数据的采集

    1.  必备软件 Rslinx classic 2.57 .net framework 2.0 VS2013 OS: win7 enterprise x64 2.  软件安装 2.1.安装RSlinx ...

  6. jetty-distribution-7.6.x 部署

    (1)启动 jetty 命令:java - jar start.jar 需要注意2个事项:必须使用JDK来运行jetty:启动是需要读取 start.ini 的配置信息. (2)第一个注意事项只要保证 ...

  7. Volly的使用及图片错位优化

    listview显示数据,利用第三方jar包Volley下的ImageLoader加载图片时,当数据类型不一致,布局复用的时候会出现图片错位,因此需要自定义IMymageLoader实现ImageLo ...

  8. oracle定期运行job

    数据库:oracle 11g,操作都在pl/sql客户端完成 第一步.创建一个”E_P_FFM_STATE(fltdt in varchar2)“存储过程 第二步.打开Command Window,创 ...

  9. webservice发布接口

    一:编写接口程序,计算功能类,有加减乘除四个方法 /** * */ package com.hlcui.util; /** * @author Administrator 将此类发布为公共接口 */ ...

  10. 关于docker中的几个小命令

    问题 A VirtualBox machine with the name 'vagrant_c__devops_docker_vagrant' already exists. 解决命令:VBoxMa ...