js分割文件快速上传
<?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分割文件快速上传的更多相关文章
- js大文件分块上传断点续传demo
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- nodeJs + js 大文件分片上传
简单的文件上传 一.准备文件上传的条件: 1.安装nodejs环境 2.安装vue环境 3.验证环境是否安装成功 二.实现上传步骤 1.前端部分使用 vue-cli 脚手架,搭建一个 demo 版本, ...
- C# 用原生JS进行文件的上传
1.此文章是用原生JS来进行文件的上传,有两个版本,一个不用ajax,一个用ajax. 1)非AJAX <!DOCTYPE html> <html> <head> ...
- js实现文件的上传和输出,拖拽上传图片
js文件上传 文件下载 以前的文件的下载都是在服务器,现在也是放在服务器比较好,有时候为了一些开发的方便,我们临时把处理的数据就放在了本地,然后自己访问.这个也是可以的. 1.利用html5的 Fil ...
- Ext.js多文件选择上传,
工作了之后来到了一家用Ext.js的公司, 一开始的时候做项目, 我被分给一个做一个单表的增删改查, 再加上文件上传功能, 带我的老师让我自己研究一下Ext.js怎么多文件选择上传, 并且能获取到上传 ...
- asp.net 基于ajaxfileupload.js 实现文件异步上传
前台代码: /*修改头像*/ //上传 function _sc() { $(".ckfile").html("") ...
- 文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)--SNF快速开发平台3.0
实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制, ...
- Node + js实现大文件分片上传基本原理及实践(一)
_ 阅读目录 一:什么是分片上传? 二:理解Blob对象中的slice方法对文件进行分割及其他知识点 三. 使用 spark-md5 生成 md5文件 四. 使用koa+js实现大文件分片上传实践 回 ...
- js文件夹上传下载组件
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
随机推荐
- RTB实时竞价广告是未来趋势
原文:http://www.inboundjournals.com/rtb-real-time-bidding-the-future-of-online-advertising/ [资讯图表] RTB ...
- 安装DirectX SDK时出现Error Code:s1023 的解决方案
刚刚安装DXSDK_Jun10时(下载地址:http://download.microsoft.com/download/A/E/7/AE743F1F-632B-4809-87A9-AA1BB3458 ...
- python(1) - 变量小测试
下面看一道题目: a = 3 b = a a = 5 print(a,b) 程序最后输出的a,b值分别是多少呢? 先想一想,然后我们执行一下看看正确答案: 正确答案 a 的值是5, b的值是3,为什么 ...
- ORM之PetaPoco错误--VS中NUGet程序包管理安装PetaPoco
一般在Vs中使用PetaPoco的时候都是使用NuGet程序包管理来安装PetaPoco的,如果你在安装PetaPoco前设置了ConnectionString,那么PetaPoco中的T4模板会自动 ...
- oracle 逗号分割,列转行,行转列
SQL代码 列转行 select REGEXP_SUBSTR(a.rolecode ,,l) rolecode from ( select 'a,aa,aaa' rolecode from dual ...
- javascript权威指南(中文版)中的一些错误(一)
本人目前正在学习js,使用的是javascript权威指南(中文版),学习的时候发现一些细节上的错误,若是我的错误,欢迎指正 1.P11------多了“我们称为 原文为 return Math.sq ...
- xml版本学生管理系统
一: 需求描述 学生成绩管理系统,使用xml存储学生信息,可以对学生信息进行增.删.删除操作. 主要目的:练习操作xml元素的增删改查 二:代码结构 1:xml存储数据如下 exam.xml < ...
- Mina的线程模型
在Mina的NIO模式中有三种I/O工作线程(这三种线程模型只在NIOSocket中有效,在NIO数据包和虚拟管道中没有,也不需要配置): IoAcceptor/IoConnector线程 IoPro ...
- sendkeys用法详解
将一个或多个按键消息发送到活动窗口,就如同在键盘上进行输入一样. 语法 SendKeys string[, wait] SendKeys 语句的语法具有以下几个命名参数: 部分 描述 string ...
- C#中泛型容器Stack<T>
我以前都是学出c,c++,这个学期开始学c#有点不适应,在编程中遇到些问题,所以自己在网上查了些资料,翻了一下书,写一些总结. 关于c#中Stack<T>泛型容器: <1>st ...