<?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. UNIX标准化及实现之POSIX标准扩展头文件

    POSIX标准定义的XSI(X/Open System Interface)扩展头文件 头文件 说明 <cpio.h> cpio归档值 <dlfcn.h> 动态链接 <f ...

  2. 关于dispatchTouchEvent, onInterceptTouchEvent, onTouchEvent的分发机制浅析

    虽说这个问题不是很难...动动手就能看出答案...但是似乎不太容易理解...几次尝试把这个问题说明白....但是好像感觉说不明白....(顿时想起了那句话----说不明白就是自己还不明白! 我怎么可能 ...

  3. Linux内核--网络栈实现分析(二)--数据包的传递过程--转

    转载地址http://blog.csdn.net/yming0221/article/details/7492423 作者:闫明 本文分析基于Linux Kernel 1.2.13 注:标题中的”(上 ...

  4. UML 之 类图(Class Dragram)

    类图的基本目的是显示建模系统的类型,主要包括的类型有:类.接口.数据类型.组件等.UML为这些类型起了个名字叫分类器.通常可以把分类器当做类,但在技术上,分类器是更为普遍的术语.实例如下图: 1.类( ...

  5. github使用成长记

    学校里一直都有自己写一些网页,一方面为了学习熟练技能,另一方面也是兴趣所在.但是独乐乐不如众乐乐,一直向往有那么一个平台能把自己做得东西分享给广大网友,并且想借着分享的契机和各位程序猿交流学习心得(这 ...

  6. iOS之Xcode8 Auto Layout新特性

    目录 1.Incrementally Adopting Auto Layout 2.Design and Runtime Constraints 3.NSGridView 4.Layout Feedb ...

  7. LeetCode 122

    Best Time to Buy and Sell Stock II Say you have an array for which the ith element is the price of a ...

  8. IE9+浏览器input文本框/密码框后面的小叉子/小眼睛清除

    为了方便我们的触控操作,IE高等浏览器针对input及input type="password"分别提供了快速清除钮(X图标)以及密码文字显示钮(小眼睛图标)的功能. 由于这经常跟 ...

  9. 程序生成SiteMapPath文件

    //创建站点地图 private void CreateSiteMap(DataSet ds) { XmlDeclaration declareation; declareation = xmlDoc ...

  10. HDOJ2014青年歌手大奖赛_评委会打分

    青年歌手大奖赛_评委会打分 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...