首先导入jQuery.form.js文件,下面src是相对于改js文件位置,

<script type="text/JavaScript" src="jquery/jquery-form.js"></script>

<script type="text/javascript">
var BYTES_PER_CHUNK = 1024 * 1024; // 每个文件切片大小定为1MB .
var slices;
var totalSlices;

//发送请求
function sendRequest() {
var blob = document.getElementById("file").files[0];
var start = 0;
var end;
var index = 0;

// 计算文件切片总数
slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
totalSlices= slices;
while(start < blob.size) {
end = start + BYTES_PER_CHUNK;
if(end > blob.size) {
end = blob.size;
}
uploadFile(blob, index, start, end);
start = end;
index++;
if ( index>=totalSlices )
location="reboot.htm";
}
}

//上传文件
function uploadFile(blob, index, start, end) {
var xhr;
var fd;
var chunk;  
var sliceIndex=blob.name+index;
chunk =blob.slice(start,end);//切割文件

fd = new FormData();
fd.append("UpgradeFileName", chunk, sliceIndex);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'cmd.cgi?cmd_tag=firmware_upgrade&group_tag=upgrade', false);//false指同步上传,因为我的服务器内存较小,选择同步,如果追求速度,可以选择
//ture,异步上传
xhr.send(fd);
if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
setTimeout("",10);
}else{
uploadFile(blob, index, start, end);
}
}
</script>

js分片上传大文件,前端代码的更多相关文章

  1. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  2. 【原创】MVC +WebUploader 实现分片上传大文件

    大文件的上传是我一直以来想学习的一个技术点,今天在项目闲暇之时,终于有机会自己尝试了一把,本文仅仅是个Demo,各种错误处理都么有,仅限于大家来学习思路. 参考博文:http://www.cnblog ...

  3. js+分布上传大文件

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

  4. 用百度webuploader分片上传大文件

    一般在做文件上传的时候,都是通过客户端把要上传的文件上传到服务器,此时上传的文件都在服务器内存,如果上传的是视频等大文件,那么服务器内存就很紧张,而且一般我们都是用flash或者html5做异步上传, ...

  5. node.js分片上传文件

    前端 : <html> <head> <title>分片上传文件</title> </head> <body> <div ...

  6. JS上传大文件的解决方案

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

  7. webApi2 上传大文件代码

    上传大文件,取消内存缓存: GlobalConfiguration.Configuration.Services.Replace(typeof(IHostBufferPolicySelector), ...

  8. PHP代码中使用post参数上传大文件

    今天连续碰到了两个同事向我反应上传大文件(8M)失败的事情! 都是在PHP代码中通常使用post参数进行上传文件时,当文件的大小大于8M时,上传不能不成功. 首先,我想到了nginx的client_m ...

  9. WEB上传大文件解决方案

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路.下面贴出简易 ...

随机推荐

  1. 一道算法题-从1到n整数中1出现的次数

    1. 题目描述 输入一个整数n,求从1到n这n个整数的十进制表示中1出现的次数.例如输入12,从1到12这些整数中包含1的数字有1,10,11和12,1一共出现了5次. 2. 题目来源 第一次看到是在 ...

  2. July 19th 2017 Week 29th Wednesday

    Rather than envy others, it is better to speed up their own pace. 与其羡慕他人,不如加快自己的脚步. The envy of othe ...

  3. good pics

  4. 360网站卫士SQL注入绕过案例一个

    不要以为用了360就可以高枕无忧,直接在netcraft的site_report中找到源站服务器IP,直接SQL脱裤,甚至可获取服务器权限. 存在漏洞的网站: 手工测试存在注入点: 但是网站有360保 ...

  5. ES6-模块导入导出

    基本用法 命名导出(named exports) 可以直接在任何变量或者函数前面加上一个 export 关键字,就可以将它导出. 例如: export const sqrt = Math.sqrt; ...

  6. hdu 6208 The Dominator of Strings【AC自动机】

    hdu 6208 The Dominator of Strings[AC自动机] 求一个串包含其他所有串,找出最长串去匹配即可,但是匹配时要对走过的结点标记,不然T死QAQ,,扎心了.. #inclu ...

  7. BZOJ1879:[SDOI2009]Bill的挑战(状压DP)

    Description Input 本题包含多组数据.  第一行:一个整数T,表示数据的个数.  对于每组数据:  第一行:两个整数,N和K(含义如题目表述).  接下来N行:每行一个字符串. T ≤ ...

  8. Spring时间(Date)类型转换+自定义

    第一种方法:利用内置的 CustomDateEditor(不推荐,每个类都需要定义) 首先,在我们的 Controller 的 InitBinder 里面,注册 CustomEditor //首先初始 ...

  9. TCP Flow Control and Data Transfer

    TCP Flow Control TCP Data Transfer Selective Repeat ARQ with Positive ACK Window slides a byte basis ...

  10. HTML5前端性能优化——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...