js分片上传大文件,前端代码,亲测ok
2017-05-04 15:23
190 查看
首先得导入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>
<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>
相关文章推荐
- 上传文件(单文件)(FormData)(前端代码+.NET服务器端)
- 39.ajaxfileupload文件上传前端代码
- 前端页面文件拖拽上传模块js代码示例
- 说说前端开发中代码文件的上传
- 第38篇 前端找老师代码放置及php对上传文件限制及SVN上传与下载
- 文件、图片的上传(一)-----前端与后端代码
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)
- 让javamail直接添加上传文件为附件的ByteDataSource代码,一个和该方法配合的上传文件类
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)
- 动网论坛上传文件漏洞的原理以及攻击的代码实现
- 设置上传文件控件文本框只读属性代码
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)
- 用jsp上传图片文件,存贮到字段类型为blob的流形式代码
- jsp中上传大文件(200M已测试),存到数据库,易发生连接超时的ie找不到网页的错误,其解决方法。略写代码,参考(.net修改代码应该可以,改天修改)
- 用struts上传多个文件的方法(代码)(转载)
- 用简单的代码来实现文件上传
- Asp.net 文件上传示例代码
- asp.NET上传文件到指定文件夹,ACCESS数据库,SQL数据库代码
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)