一、网盘割据的时代
不知大家有没有观察过，在秋季，也就是眼下这个时间，当阵风挂起的时候，地上的落叶就会以一个接一个，翻滚着一同被吹走，这就是“跟风”。老祖宗确实很有智慧，造出来的词语源于生活，又高于生活。
眼下，又是另一波跟风之势——“网盘”，犹如当年团购一样。不过，网盘还是有一定的技术和其他成本，因此，还不像团购那样“落叶漫天飞舞”的状态。但是，各大公司相继介入，可谓又是另外一场群雄之战。
我并不是专业的产品人，也不是公司的决策者，因此，面对一些纷杂繁芜的现象，自己无心去深入，也不会去评价。立志做个技术人，因此，我所关心的可能就是技术实现，至于孰对孰错，恩怨情仇，公关伎俩，生死天命等一概作云烟从眼前飘过。
网盘中有个很重要的，可以说是核心的功能，就是文件上传，So，本文就来说说这个上传，如何在HTTP协议下实现文件的断点续传呢？
二、文件断点续传的实现
目前从实用技术角度讲，文件上传的断点续传实现主要是借助客户端，例如，我们首次进入某网盘，会看到下图所示的“控件安装”提示：
有的网盘也有文件上传暂停的功能，这似乎是借助swfUpload实现的。
也就是，这些带续传功能的上传都不是使用HTTP协议实现的，也就是不是传统的网页技术(HTML+CSS+JS)实现的。
然，times are changing, 事物发展，时代变化。以前的一些所谓的“不能”、“不可能”都将成为过去。
上月一篇独苗文章介绍了XMLHttpRequest level 2(下简称Ajax 2.0)中的一些支持的数据格式，如果稍微关注，应该知道，Ajax 2.0中最大的变化之一就是对二进制数据的支持，而且提供了一个可以直接处理二进制数据的方法——slice方法。
JS中的字符串有slice方法，数组也有。Ajax 2.0经过一些变化后，现在也和数组、字符串的slice方法语法完全一致了。于是，我们就可以把二进制数据流想象成一些连续的字符串数据，并对这些二进制数据进行slice处理。
比方说怎样的场合呢？
PHP默认似乎有个最大文件上传的限制 – post_max_size，我的本地看了下，是64M.
此时，我们想一次性传一个80M的动作片精华片段，就会以失败告终。
但是，有了slice方法，我们可以把文件分割，比方说，每20M作为一个请求发送出去，后台再把这些二进制数据拼合成一个完整文件。
slice(0, 20); slice(20, 40); slice(40, 60); slice(60)
还有一个很重要的场合就是断点续传！
文件传输是个具有时间周期的过程，从玩三国杀的离线率可以看出，掉线什么的是常有的事情。显然，传文件必定会存在传着传着就死在99%位置的情况。
你想啊，大鼻孔姐的片子想放到网盘里，随时随地可以欣赏。结果看着进度条等了40分钟，好不容易传到99%，突然断电…………开机后，发现又要重传，是不是小弟弟要气得短小软？显然，后果很严重哈~
因此，对于大文件而言，断电续传功能很重要。有了Blob数据格式的slice方法，一切都变得简单了。
我的思路是这样的，有两条：
1. 浏览器记住（如localStorage）最近一次成功传输的位置；当再次上传这个图片的时候，直接从浏览器存储的位置开始传。
2. 浏览器不做任何事情，在上传之前先去后台走一遍，看看目前此文件是否存在，以及存在的大小，返回给浏览器，然后浏览器再决定上传的起始位置。
理性的分析以及实践的结果表明，第二种思路可行性更高。//zxx: 并不一定是最好的思路，您可以自己想出更精彩的实践方法
如果用文字举例的话就是：
某老师的视频是80*1024*1024B, 我们每次传1024*1024B，也就是1M，假设传了79M了，结果大脚一抖，电源关掉有木有！某老师就这样随风逝去了……
用户重新开机，决定再次传这个80M的视频。当用户选择了这个文件后，我们先去后台走一圈，把当前已经传好的文件大小反馈给客户端（Ajax 1.0就可以），JS拿反馈大小和源文件大小一比对，奶奶的，残缺啊！于是，就从残缺位置slice，这里就是：
file.slice(79*1024*1024)
接着之前的只传了1M就OK啦！于是，断点续传实现。
由于网页本身的局限性，我们没法直接触发本地文件的上传。因此，目前而言，断点文件还是要用户选择（相比客户端上传软件多了这一步）。
三、文件断点续传的实践
您可以狠狠地点击这里：HTTP协议下Ajax实现的文件断点续传demo
说明：
- 上demo可以说是一个比较完善的上传体验，有删除，重传，续传，进度条等常用功能。
- 基于Ajax 2.0的二进制文件传输实现，因此，IE10+，Chrome以及Firefox等浏览器支持。另外JS原生，无外部依赖。
- 空间的流量月月吃紧，经常溢出不够用，因此，为了节约成本，只允许最大
200K的文件。所以，大家想要测试断点续传效果，可以通过工具，把自己的浏览器速度限制到10~20K每秒。 - demo页面每
100K就会对文件进行一次分割上传，因此，100~200K大小文件会有看到2次上传请求。PS：实际开发时候，应该至少1M一次分割。 - 为了直观表现断点上传的功能，我会截一个本地的视频给大家演示，并原声重现。
- 后台PHP很简单，就是追加二进制数据，
file_put_contents方法有个FILE_APPEND选项，直接追加，很好用的！ - 正好研究了下开源协议，这里请容我练个：demo页面中的JS+CSS+HTML源代码遵循GPL协议，即您可以任意复制，修改，但是，只能作为学习或私人项目使用，不能作为商业软件的一部分去出售。如有疑问，可zhangxinxu@zhangxinxu.com联系。
其他一些技术细节，懂的人不说也知道是怎么回事，不懂的人要花很大功夫斟酌表达才可以。然，目前时机不成熟，付出收益比略低，因此，这里不具体叙述，有问题欢迎邮箱联系。下面视频演示下断点续传的效果：
视频展示：
因为半夜三更录的视频，老婆大人已经安然就寝，所以自己声音比较小，发音也不太准，貌似被优酷搞糊了，大家凑合看看吧~~
视频地址：http://v.youku.com/v_show/id_XNjMwNjE3NzY4.html
四、说点题外话
上月本人只更新了一篇文章。有一周是整周的培训。然后除了研究现在这个Ajax断点续传，还在做一个自己的开源项目（已经用了两周了，本周应该可以结束）。
本人最近有在纠结专利与开源的事情。我司申请专利很是方便，而且公司鼓励，且对个人发展有很有帮助，我显然是要积极做这些事情的。但是，个人价值观 中很重要的一点就是要留下什么，因此，自己是非常喜欢共享东西的。于是就存在一个矛盾，有些东西，例如一些创新的想法或者实现方式，如果成为的专利，就不 好拿出来随意分享了，因为，自己申请的专利不是自己的而是公司的，自己完全没有把控权。头疼~~
不过，今天例会跟组里前辈沟通了下，算是想通了。这样子，自己平时业余时间研究的东西，即使很赞，很具有专利性，我也会及时和大家一起探讨与进步；如果是实际工作发现的创新性想法，则走专利路线，技术封闭。我举得这样的权衡应该是很不错的，不知大家的看法如何呢？
哈哈，今天特地研究了下开源版权的问题，学到了不少，各种License都大致了解了一点，文中好像就有体现了，
博客所有技术文章遵循CC协议，即署名、非商业性使用、相同方式共享、禁止演绎。
一些开源插件等遵循其他协议，回头补上~~
文章来自：张鑫旭-鑫空间-鑫生活
作者上传界面源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="Ajax文件上传断点续传 » 张鑫旭-鑫空间-鑫生活" />
<meta name="description" content="张鑫旭web前端学习实例页面 Ajax文件上传断点续传" />
<meta name="keywords" content="web前端, css, jQuery, javascript" />
<meta name="author" content="张鑫旭, zhangxixnu" />
<title>Ajax文件上传断点续传 » 张鑫旭-鑫空间-鑫生活</title>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="btn.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style>
ul { padding: 0; margin: 0; list-style-type: none; }
.upload { width: 600px; margin: 0 auto; }
.form { padding: 12px 0 30px; }
.file { position: absolute; width: 230px; height: 34px; cursor: pointer; opacity: 0; }
.file:hover + .btn-info { background-color: #39b3d7; border-color: #269abc; }
[type="submit"] { width: 100px; margin-left: 260px; float: right; visibility: hidden; }
.upload_ul { display: none; width: 100%; border: 1px solid #bbb; background-color: #fff; font-size: 12px; }
.upload_ul > li { display: table-row; opacity: 1; overflow: hidden; -webkit-transition: opacity .2s; transition: opacity .2s;
background-image:-webkit-linear-gradient(top, #ABD9FF, #88C9FF);
background-image: linear-gradient(to bottom, #ABD9FF, #88C9FF);
-moz-background-size: 0% 100%;
background-size: 0% 100%;
background-repeat: no-repeat;
}
.upload_title { color: #666; background-color: #f0f0f0; }
.upload_cell { display: table-cell; padding: 5px 10px; border-top: 1px solid #ddd; vertical-align:middle; }
.upload_cell:first-child { width: 50%; }
.waiting{ color: #999; }
.uploading { color: #069; }
.canceling { color: #CE4625; }
.success { color: green; }
.error { color: #f30; }
.remind { padding: 5px 10px; background-color: #eee; margin-top: 40px; color: #666; font-size: 12px;}
/*icon copyright by weiyun */
.icon { display: inline-block; width: 30px; height: 30px; background: url(file-small.png) no-repeat -74px -490px; vertical-align: middle; }
.icon-doc,.icon-docx{background-position:0 0}
.icon-ppt,.icon-pptx{background-position:-37px 0}
.icon-xls,.icon-xlsx{background-position:-74px 0}
.icon-pdf,.ico-pdf{background-position:-111px 0}
.icon-txt,.ico-txt{background-position:-148px 0}
.icon-msg,.ico-msg{background-position:0 -35px}
.icon-rp,.ico-rp{background-position:-37px -35px}
.icon-vsd,.ico-vsd{background-position:-74px -35px}
.icon-ai,.ico-ai{background-position:-111px -35px}
.icon-eps,.ico-eps{background-position:-148px -35px}
.icon-log,.ico-log{background-position:0 -70px}
.icon-xmin,.ico-xmin{background-position:-37px -70px}
.icon-cab,.ico-cab{background-position:-74px -70px}
.icon-psd,.ico-psd{background-position:0 -105px}
.icon-jpg,.ico-jpg{background-position:-37px -105px}
.icon-jpeg,.ico-jpeg{background-position:-37px -105px}
.icon-png,.ico-png{background-position:-74px -105px}
.icon-gif,.ico-gif{background-position:-111px -105px}
.icon-bmp,.ico-bmp{background-position:-148px -105px}
.icon-rmvb,.ico-rmvb{background-position:0 -140px}
.icon-rm,.ico-rm{background-position:0 -140px}
.icon-mod,.ico-mod{background-position:-37px -140px}
.icon-mov,.ico-mov{background-position:-74px -140px}
.icon-3gp,.ico-3gp{background-position:-111px -140px}
.icon-avi,.ico-avi{background-position:-148px -140px}
.icon-swf,.ico-swf{background-position:0 -175px}
.icon-flv,.ico-flv{background-position:-37px -175px}
.icon-mpe,.ico-mpe{background-position:-74px -175px}
.icon-asf,.ico-asf{background-position:-111px -175px}
.icon-wmv,.ico-wmv{background-position:-148px -175px}
.icon-mp4,.ico-mp4{background-position:-185px -175px}
.icon-wma,.ico-wma{background-position:0 -210px}
.icon-mp3,.ico-mp3{background-position:-37px -210px}
.icon-wav,.ico-wav{background-position:-74px -210px}
.icon-apk,.ico-apk{background-position:0 -245px}
.icon-ipa,.ico-ipa{background-position:-37px -245px}
.icon-exe,.ico-exe{background-position:-74px -245px}
.icon-msi,.ico-msi{background-position:-111px -245px}
.icon-bat,.ico-bat{background-position:-148px -245px}
.icon-fla,.ico-fla{background-position:0 -280px}
.icon-htm,.ico-htm,.icon-html,.ico-html{background-position:-37px -280px}
.icon-c,.ico-c{background-position:-111px -280px}
.icon-xml,.ico-xml{background-position:-148px -280px}
.icon-asp,.ico-asp{background-position:-185px -280px}
.icon-chm,.ico-chm{background-position:0 -315px}
.icon-hlp,.ico-hlp{background-position:-37px -315px}
.icon-ttf,.ico-ttf{background-position:-111px -315px}
.icon-otf,.ico-otf{background-position:-148px -315px}
.icon-rar,.ico-rar{background-position:0 -350px}
.icon-zip,.ico-zip{background-position:-37px -350px}
.icon-tar,.ico-tar{background-position:-74px -350px}
.icon-cab,.ico-cab{background-position:-111px -350px}
.icon-uue,.ico-uue{background-position:-148px -350px}
.icon-jar,.ico-jar{background-position:0 -385px}
.icon-7z,.ico-7z{background-position:-37px -385px}
.icon-iso,.ico-dmg{background-position:-74px -385px}
.icon-dmg,.ico-dmg{background-position:-111px -385px}
.icon-ace,.ico-ace{background-position:-148px -385px}
.icon-bak,.ico-bak{background-position:0 -420px}
.icon-tmp,.ico-tmp{background-position:-37px -420px}
.icon-old,.ico-old{background-position:-74px -420px}
.icon-document,.ico-document{background-position:0 -455px}
.icon-exec,.ico-exec{background-position:-37px -455px}
.icon-code,.ico-code{background-position:-74px -455px}
.icon-image,.ico-image{background-position:-111px -455px}
.icon-video,.ico-video{background-position:-148px -455px}
.icon-audio,.ico-audio{background-position:0 -490px}
.icon-compress,.ico-compress{background-position:-37px -490px}
.icon-unknow,.ico-unknow{background-position:-74px -490px}
.icon-filebroken,.ico-filebroken{background-position:-111px -490px}
.icon-link,.ico-link{background-position:-111px -418px}
</style>
</head>
<body>
<div id="header">
<a href="http://www.zhangxinxu.com/" class="logo" title="回到鑫空间-鑫生活首页">
<img src="http://www.zhangxinxu.com/php/image/zxx_home_logo.png" border="0" />
</a>
</div>
<div id="main">
<h1>Ajax文件上传断点续传实例页面</h1>
<div id="body" class="light">
<div id="content" class="show">
<h3>Ajax断点续传展示</h3>
<div class="article_new"><a href="http://www.zhangxinxu.com/wordpress/?p=3754">回到相关文章 »</a></div>
<div class="demo">
<div class="upload">
<form id="form" class="form" action="upload.php">
<input type="file" id="file" class="file" name="file[]" multiple><span class="btn btn-info">请选择要上传的文件(小于200K)</span>
<input type="submit" id="submit" class="btn btn-primary" value="上传">
</form>
<ul id="uploadUl" class="upload_ul">
<li class="upload_title">
<div class="upload_cell">标题</div>
<div class="upload_cell">类型</div>
<div class="upload_cell">大小</div>
<div class="upload_cell">状态</div>
<div class="upload_cell">操作</div>
</li>
</ul>
<p class="remind">1. 点击默认展示的按钮选择文件；<br>2. 点击后出现的上传按钮进行上传</p>
</div>
</div>
</div>
</div>
</div>
<script id="fileTemplate" type="text/template">
<li id="filelist_$id$">
<div class="upload_cell">$name$</div>
<div class="upload_cell"><i class="icon icon-$type$"></i></div>
<div class="upload_cell">$size$</div>
<div id="filestatus_$id$" class="upload_cell">$status$</div>
<div id="fileoperate_$id$" class="upload_cell">$operate$</div>
</li>
</script>
<script>
var $ = function(id) {
return document.getElementById(id);
};
// 一些元素
var eleForm = $("form"), eleFile = $("file"), eleSubmit = $("submit"),
// 文件等待上传列表的容器
eleUploadUl = $("uploadUl"),
// 模板元素
eleTemplate = $("fileTemplate");
// 上传文件队列数组
var fileArray = [],
// 文件分割上传的间隙大小
fileSplitSize = 1024 * 100,
// 模板HTML
htmlTemplate = eleTemplate && eleTemplate.innerHTML || '';
if (typeof history.pushState == "function") {
// 一些元素的状态
var objStateElement = (function() {
var _$ = function(name, fileid) {
return $("file"+ name +"_" + fileid) || { innerHTML: "" };
};
return {
// 上传进度条背景的控制
backgroundSize: function(params, percent) {
var dom = typeof params == "string"? $("filelist_" + params): params;
if (dom) {
dom.style.mozBackgroudSize = percent + "% 100%";
dom.style.backgroundSize = percent + "% 100%";
}
},
wait: function(fileid) {
// 一些状态的改变
_$("status", fileid).innerHTML = '<span class="uploading">上传中...</span>';
_$("operate", fileid).innerHTML = '<a href="javascript:" data-type="pause" data-id="'+ fileid +'">暂停</a>';
},
keep: function(fileid) {
_$("status", fileid).innerHTML = '<span class="waiting">等待续传...</span>';
},
success: function(fileid, time) {
var eleList = $("filelist_" + fileid),
eleOperate = $("fileoperate_" + fileid),
eleStatus = $("filestatus_" + fileid);
// 进度条隐藏
this.backgroundSize(eleList, "0");
// 因为元素不会删除，因此，有必要清除id
eleStatus.id = "";
eleOperate.id = "";
eleList.id = "";
// 删除本地存储的起点，完全上传成功，因此没有续传的必要
localStorage.removeItem(fileid);
// 状态信息再变化
eleStatus.innerHTML = '<span class="success">'+ ((performance.now() - time > 1000)? "上": "秒") +'传成功！</span>';
eleOperate.innerHTML = '';
console.log([performance.now(), time].join());
},
error: function(fileid) {
// 状态信息再变化
_$("status", fileid).innerHTML = '<span class="error">出现异常！</span>';
_$("operate", fileid).innerHTML = '<a href="javascript:" data-type="try" data-id="'+ fileid +'">重试</a>';
}
}
})();
// 单文件上传
var funFileUpload = function(fileid, onsuccess, onerror, onpause) {
var file = fileArray[fileid], now = performance.now();
if (!fileid || !file) return;
onsuccess = onsuccess || function() {
funFileUpload(fileArray[0]);
};
onerror = onerror || function() {
funFileUpload(fileArray[fileArray.indexOf(fileid) + 1]);
};
onpause = onpause || function() {
funFileUpload(fileArray[fileArray.indexOf(fileid) + 1]);
};
if (file.flagPause == true) {
onpause.call(fileid);
return;
}
objStateElement.wait(fileid);
// 文件分割上传
// 文件大小和分割起点
// 注释的是本地存储实现
var size = file.size, /*start = localStorage[fileid] * 1 || 0*/ start = $("filelist_" + fileid).filesize;
if (size == start) {
// 已经传过了
fileArray.shift();
if (delete fileArray[fileid]) console.log(fileArray.join() + "---上传成功");
objStateElement.success(fileid, now);
// 回调
onsuccess.call(fileid, {});
return;
}
var funFileSize = function() {
if (file.flagPause == true) {
onpause.call(fileid);
return;
}
var data = new FormData();
data.append("name", encodeURIComponent(file.name));
data.append("fileid", fileid);
data.append("file", file.slice(start, start + fileSplitSize));
data.append("start", start + "");
// XMLHttpRequest 2.0 请求
var xhr = new XMLHttpRequest();
xhr.open("post", eleForm.action, true);
xhr.setRequestHeader("X_Requested_With", location.href.split("/")[5].replace(/[^a-z]+/g,"$"));
// 上传进度中
xhr.upload.addEventListener("progress", function(e) {
objStateElement.backgroundSize(fileid, (e.loaded + start) / size * 100);
}, false);
// ajax成功后
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
try {
var json = JSON.parse(xhr.responseText);
} catch (e) {
objStateElement.error(fileid);
return;
}
//var json = JSON.parse(xhr.responseText);
if (!json || !json.succ) {
objStateElement.error(fileid);
onerror.call(fileid, json);
return;
}
if (start + fileSplitSize >= size) {
// 超出，说明全部分割上传完毕
// 上传队列中清除者一项
fileArray.shift();
if (delete fileArray[fileid]) console.log(fileArray.join() + "---上传成功");
objStateElement.success(fileid, now);
// 回调
onsuccess.call(fileid, json);
} else {
// 尚未完全上传完毕
// 存储上传成功的文件点，以便出现意外的时候，下次可以断点续传
localStorage.setItem(fileid, start + "");
// 改变下一部分文件的起点位置
start += fileSplitSize;
console.log(start);
// 上传下一个分割文件
funFileSize();
}
} else {
objStateElement.error(fileid);
}
}
};
xhr.send(data);
};
// 文件分割上传开始
funFileSize();
};
// IE10+, Chrome, FireFox等~
eleForm.addEventListener("submit", function(event) {
funFileUpload(fileArray[0]);
event.preventDefault();
});
// 选择文件后
eleFile.addEventListener("change", function(event) {
// 获取文件
var files = event.target.files;
// 遍历文件，显示文件列表信息
var htmlFile = '', index = 0, length = files.length;
for (; index < length; index++) {
var file = files[index]; // Blob对象相关知识可参考：http://www.zhangxinxu.com/wordpress/?p=3725
// console.log(file.type);
var name = file.name, size = file.size, type = file.type || "", id = (file.lastModifiedDate + "").replace(/\W/g, '') + size + type.replace(/\W/g, '');
var objHtml = {
id: id,
type: 'cloud',
name: name,
size: size + "B",
status: '<span class="waiting">等待上传</span>',
operate: '<a href="javascript:" data-type="delete" data-id="'+ id +'">删除</a>'
}
// name 50字符限制
if (name.length > 50) {
objHtml.name = '<span title="'+ name +'">'+ name.slice(0,20) + '...' + name.slice(-20) +'</span>';
}
// 文件类型与对应的图标
var format = name.split(".");
objHtml.type = format[format.length - 1] || "unknown";
// 如果大小大于1M使用'M'为单位表示, 1位小数点
if (size > 1024 * 1024) {
objHtml.size = Math.round(size / (1024 * 1024) * 10) / 10 + "M";
} else if (size > 1024) {
// 如果大小大于1KB使用'KB'为单位表示, 1位小数点
objHtml.size = Math.round(size / 1024 * 10) / 10 + "KB";
}
if (size > 1024 * 200) {
// 如果文件大于200K, 状态为'大小溢出'
objHtml.id = Math.random();
objHtml.status = '<span class="error">文件过大</span>';
objHtml.operate = '';
} else if (fileArray.indexOf(id) != -1) {
// 如果文件已经在列表中
objHtml.id = Math.random();
objHtml.status = '<span class="error">文件已存在</span>';
objHtml.operate = '';
} else {
// 加入文件队列，并缓存对应的文件二进制对象
fileArray.push(id);
fileArray[id] = file;
}
htmlFile += htmlTemplate.replace(/\$\w+\$/gi, function(matchs) {
var returns = objHtml[matchs.replace(/\$/g, "")];
return (returns + "") == "undefined"? "": returns;
});
}
// 载入HTML
if (htmlFile !== '') {
eleSubmit.style.visibility = "visible";
eleUploadUl.style.display = "table";
eleUploadUl.insertAdjacentHTML("beforeEnd", htmlFile);
// 初始化进度条
// 下面注释的是本地存储方法
/*fileArray.forEach(function(fileid) {
var loaded = localStorage[fileid] * 1;
if (loaded > 0) {
objStateElement.backgroundSize(fileid, loaded / fileArray[fileid].size * 100);
}
});*/
// 现在直接使用Ajax请求
var nameArray = fileArray.map(function(fileid) {
var nameSplit = fileArray[fileid].name.split("."),
name = nameSplit[nameSplit.length - 1];
return fileid + "." + name;
});
var xhr_filesize = new XMLHttpRequest();
xhr_filesize.open("GET", "filesize.php?filename=" + nameArray.join(), true);
xhr_filesize.onreadystatechange = function(e) {
if (xhr_filesize.readyState == 4) {
if (xhr_filesize.status == 200 && xhr_filesize.responseText) {
var json = JSON.parse(xhr_filesize.responseText);
if (json.succ && json.data) {
for (var key in json.data) {
if (json.data[key] > 0 && json.data[key] < fileArray[key].size) {
objStateElement.backgroundSize(key, json.data[key] / fileArray[key].size * 100);
objStateElement.keep(key);
}
$("filelist_" + key).filesize = json.data[key];
}
}
}
}
};
xhr_filesize.send();
}
eleForm.reset();
});
// 文件删除等委托事件
eleUploadUl.addEventListener("click", function(event) {
var target = event.target, id = target && target.getAttribute("data-id");
if (id && /^a$/i.test(target.tagName)) {
switch (target.getAttribute("data-type")) {
case "delete": {
var filelist = $("filelist_" + id);
if (filelist) {
filelist.style.opacity = 0;
// 源数据清除
fileArray.splice(fileArray.indexOf(id), 1);
if (delete fileArray[id]) console.log(fileArray.join() + "---删除成功");
setTimeout(function() {
filelist.parentNode.removeChild(filelist);
if (fileArray.length == 0) {
eleSubmit.style.visibility = "hidden";
eleUploadUl.style.display = "none";
}
}, 220);
}
break;
}
case "pause": {
var eleStatus = $("filestatus_" + id);
if (fileArray[id]) {
fileArray[id].flagPause = true;
target.setAttribute("data-type", "reupload");
target.innerHTML = "继续";
if (eleStatus) eleStatus.innerHTML = "上传暂停";
}
break;
}
case "try": case "reupload": {
funFileUpload(id, function() {}, function() {}, function() {});
}
}
}
});
} else {
eleUploadUl.style.display = "block";
eleUploadUl.innerHTML = '<li class="error"><p style="margin:.5em 1em;">当前浏览器不支持！试试IE10+, Chrome等~</p></li>';
}
</script>
<div id="footer">
Designed & Powerd by <a href="http://www.zhangxinxu.com/">zhangxinxu</a><br />
Copyright© 张鑫旭-鑫空间-鑫生活<br>
<a href="http://www.miibeian.gov.cn/" target="_blank">鄂ICP备09015569号</a>
</div>
<div id="ad" style="right: 0; top: 0; text-align: center;">
<a title="小小赞助大大帮助" href="https://me.alipay.com/zhangxinxu" target="_blank"><img width="159" height="37" align="absmiddle" alt="支付鼓励" src="/wordpress/wp-content/themes/default/images/pay_encourage.png"></a>
</div>
</body>
</html>