JavaScript File分段上传


Posted in Javascript onMarch 10, 2016

HTML

<form method="POST" name="form" action="/mupload/upload/" enctype="multipart/form-data">
<input type='hidden' name='csrfmiddlewaretoken' value='' />
<input id='file' type='file' name='file' onchange="" />
<input id='button' name='submit' type='button' value="上传" onclick="chunk_upload(this)"/>
</form>

js方法

var fileSplitSize = 1024 * 1024;
var start=0,end=0;
var i=0;
// 文件段上传
function chunk_upload(button){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "/chunk_upload/upload/", false);
xmlhttp.setRequestHeader("X-CSRFToken", button.form['csrfmiddlewaretoken'].value);
var f = button.form;
var file = f['file']['files'][0];
var size=file.size;
end=start+fileSplitSize;
if(end>size){
i=-1;
end=size;
}else{
i+=1;
end=end;
}<br>//按大小切割文件段
var blob = file.slice(start, end);
xmlhttp.setRequestHeader('charset','utf-8');
xmlhttp.setRequestHeader("fileMD5", fileMD5);
xmlhttp.setRequestHeader("start", start);
xmlhttp.setRequestHeader("end", end);
xmlhttp.send(blob);
if(xmlhttp.status==200){<br> if(end==size){<br> var backtext=xmlhttp.responseText;<br> alert(backtext);<br> }else{<br> alert("上传完成第"+i+"段")<br> start=end;<br> chunk_upload(button);<br> }<br> }else{<br> alert("上传错误");<br> chunk_upload(button);<br> }
}

主要思想:

注意设置切割的起始位置和切割大小,通过XMLHttpRequest的发送请求(http协议要知道)。

如果一些标记数据可以添加协议头:xmlhttp.setRequestHeader("end", end);

发送协议体xmlhttp.send(data);

监听返回码来判断是否传递成功,在进行下一步操作。

重新设置切割位置,然后递归调用自身start=end;chunk_upload(button);

注意:

切割的start与end和filesize的关系

纯js异步上传文件,并返回上传进度

纯js实现异步上传文件,异步返回文件上传进度,0.05到0.1秒回调一次上传进度,其它详细见代码片段下用法注释

1. 简单的异步上传函数

;(function(window,document){
var myUpload = function(option) {
var file,
fd = new FormData(),
xhr = new XMLHttpRequest(),
loaded, tot, per, uploadUrl,input;
input = document.createElement("input");
input.setAttribute('id',"myUpload-input");
input.setAttribute('type',"file");
input.setAttribute('name',"files");
input.click();
uploadUrl = option.uploadUrl;
callback = option.callback;
uploading = option.uploading;
beforeSend = option.beforeSend;
input.onchange= function(){
file = input.files[0];
if(beforeSend instanceof Function){
if(beforeSend(file) === false){
return false;
}
}
fd.append("files", file);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if(callback instanceof Function){
callback(xhr.responseText);
}
}
}
//侦查当前附件上传情况
xhr.upload.onprogress = function(evt) {
loaded = evt.loaded;
tot = evt.total;
per = Math.floor(100 * loaded / tot); //已经上传的百分比
if(uploading instanceof Function){
uploading(per);
}
};
xhr.open("post", uploadUrl);
xhr.send(fd);
}
};
window.myUpload = myUpload;
})(window,document);
//用法
//触发文件上传事件
myUpload({
//上传文件接收地址
uploadUrl: "/async/myUpload.php",
//选择文件后,发送文件前自定义事件
//file为上传的文件信息,可在此处做文件检测、初始化进度条等动作
beforeSend: function(file) {
},
//文件上传完成后回调函数
//res为文件上传信息
callback: function(res) {
},
//返回上传过程中包括上传进度的相关信息
//详细请看res,可在此加入进度条相关代码
uploading: function(res) {
}
});
Javascript 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
javascript基础知识
Jun 07 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
ES6中非常实用的新特性介绍
Mar 10 #Javascript
ES6的新特性概览
Mar 10 #Javascript
JavaScript字符串常用的方法
Mar 10 #Javascript
javascript中call apply 与 bind方法详解
Mar 10 #Javascript
angularjs表格ng-table使用备忘录
Mar 09 #Javascript
详解AngularJS控制器的使用
Mar 09 #Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 #Javascript
You might like
PHP时间和日期函数详解
2015/05/08 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现嵌套列表去重方法示例
2017/12/28 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python中@property的理解和使用示例
2019/06/11 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
python requests证书问题解决
2019/09/05 Python
wxPython实现整点报时
2019/11/18 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
C#笔试题
2015/07/14 面试题
服装厂厂长职责
2013/12/16 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript