首先导入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. 设计模式:装饰器(Decorator)模式

    设计模式:装饰器(Decorator)模式 一.前言    装饰器模式也是一种非常重要的模式,在Java以及程序设计中占据着重要的地位.比如Java的数据流处理,我们可能看到数据流经过不同的类的包装和 ...

  2. 简单的python爬虫--爬取Taobao淘女郎信息

    最近在学Python的爬虫,顺便就练习了一下爬取淘宝上的淘女郎信息:手法简单,由于淘宝网站本上做了很多的防爬措施,应此效果不太好! 爬虫的入口:https://mm.taobao.com/json/r ...

  3. VMware workstation 虚拟机安装帮助文档(以windows server 2003为例)

    本次安装以Windows server 2003为例: 1.在桌面上双击VMware快捷方式打开,并点击文件>新建虚拟机 2.这里选择默认的“典型”,点击下一步 3.选择浏览,找到windows ...

  4. 转 C++11之std::function和std::bind

    std::function是可调用对象的包装器,它最重要的功能是实现延时调用: #include "stdafx.h" #include<iostream>// std ...

  5. PostgreSQL的generate_series函数应用

    一.简介 PostgreSQL 中有一个很有用处的内置函数generate_series,可以按不同的规则产生一系列的填充数据. 二.语法 函数 参数类型 返回类型 描述 generate_serie ...

  6. java的串行化

    参考博客:Java 对象的串行化(Serialization) 1,什么是串行化 对象的寿命通常随着生成该对象的程序的终止而终止.有时候,可能需要将对象的状态保存下来,在需要时再将对象恢复.我们把对象 ...

  7. (一)自定义ImageView,初步实现多点触控、自由缩放

    真心佩服那些一直专注于技术共享的大神们,正是因为他们无私的分享精神,我才能每天都有进步.近日又算是仔细学了android的自定义控件技术,跟着大神的脚步实现了一个自定义的ImageView.里面涉及到 ...

  8. WK 与 JS 的那些事

    苹果在iOS 8中推出了 WKWebView,这是一个高性能的 web 框架,相较于 UIWebView来说,有巨大提升.本文将针对 WKWebView 进行简单介绍,然后介绍下如何和 JS 进行愉快 ...

  9. 本地测试时修改localhost为自己网站的域名的方法(转载)

    做网站的,在本地测试时,所用的地址基本上都是localhost 或者直接用IP地址:127.0.0.1 如果仅仅是用来测试网站内部的程序代码之类的当然没问题,但是如果我们还要测试网站上添加的广告或者统 ...

  10. Linux学习总结(十三)文本编辑器 vim

    vim是vi的升级版,会根据文本属性带色彩显示,具体用法如下: 一般模式 : 1.光标定位: 左右移动一个字符, h l上下移动一个字符, k j左右下上 ,左右在两边,下上在中间这样记光标定位行首 ...