js HTML5 Ajax实现文件上传进度条功能
本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能，分享给大家供大家参考，具体内容如下
1. lib.js
var Host = window.location.host;
//--Cookie
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + \'=\'+ escape (value) + \';expires=\' + exp.toGMTString();
}
function getCookie(name)
{
var arr,reg=new RegExp(\'(^| )\'+name+\'=([^;]*)(;|$)\');
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
//--Dom & String
var get = {
//-- 获得Dom Id
Id:function(obj)
{
return is.object(obj) ? obj : (document.getElementById(obj));
},
//--获得Body
body:function()
{
return document.body;
},
//-- 通过Html 标签取对象
Tag:function(obj, Tagname)
{
return obj.getElementsByTagName(Tagname);
},
//-- 通过Name 来取对象
Name:function (Name)
{
return document.getElementsByName(Name);
},
//-- Url编码转换
encode:function (str)
{
return encodeURIComponent(str);
},
filepath:function (obj,callback)
{
window.URL = window.URL || window.webkitURL;
img = new Image();
var reader = new FileReader();
reader.readAsDataURL(get.Id(obj).files[0]);
reader.onload = function(e){
callback(this.result);
source = this.result;
}
// return window.URL.createObjectURL(get.Id(obj).files[0]);
}
}
var set = {
//-- url 跳转
url:function(URL)
{
window.location.href = URL;
},
//-- 页面刷新
reload:function()
{
window.location.reload();
},
//-- 动态设置 标签内容 @ obj 为标签内容，text 为内容
html:function (obj, text)
{
obj.innerHTML = text;
}
}
var string = {
//-- 将字符转换成Json
toJson:function(str)
{
return eval(\'(\'+str+\')\');
},
//-- 不区分大小写判断 相等true ,
eqlower:function(str1, str2)
{
if(str1.toLowerCase() == str2.toLowerCase()){
return true;
}
return false;
}
}
var is = {
//-- 是否是IE浏览器,用此来判断是否支持HTML5，低于IE10的返回false，由于 IE采用 V8 JavaScript引擎
html5:function ()
{
return (!/*@cc_on!@*/~0x1111111111111111) ? false : true;
},
//--验证身份证，并且返回身份证，性别，住址，年龄
Card:function (sId) {
var card_area={
11:\'北京\', 12:\'天津\', 13:\'河北\', 14:\'山西\', 21:\'辽宁\', 15:\'内蒙古\',
22:\'吉林\', 31:\'上海\', 32:\'江苏\', 33:\'浙江\', 34:\'安徽\', 23:\'黑龙江\',
35:\'福建\', 36:\'江西\', 37:\'山东\', 41:\'河南\', 42:\'湖北\', 43:\'湖南\',
44:\'广东\', 45:\'广西\', 46:\'海南\', 50:\'重庆\', 51:\'四川\', 52:\'贵州\',
53:\'云南\', 54:\'西藏\', 61:\'陕西\', 62:\'甘肃\', 63:\'青海\', 64:\'宁夏\',
65:\'新疆\', 71:\'台湾\', 81:\'香港\', 82:\'澳门\', 91:\'国外\'
};
var iSum=0
var info=\'\'
var card_info=Array(2);
var error = \'\';
sId=sId.replace(/x$/i,\'a\');
if (sId.length==0){
error = \'请填写你的身份证\';
return false;
}
if (null == card_area[parseInt(sId.substr(0,2))]) {
error = \'非法证件你的地区填写有错误请仔细填写\';
return false;
}
sBirthday=sId.substr(6,4)+\'-\'+Number(sId.substr(10,2)) + \'-\'+Number(sId.substr(12,2));
var d = new Date(sBirthday.replace(/-/g,\'/\'));
if (sBirthday!=(d.getFullYear()+\'-\'+ (d.getMonth()+1) + \'-\' + d.getDate())) {
error = \'非法证件你的生日填写有错误请仔细填写\';
return false;
}
for(var i = 17; i>=0; i--)
{
iSum += (Math.pow(2,i) % 11) *
parseInt(sId.charAt(17 - i),11)
}
if (1 != iSum%11) {
error = \'非法证号你确认你是地球人请认真填写哦~~~~\';
return false;
}
if (sId.length>19){
error = \'你确认你的身份证是有效证件？\';
return false;
}
card_info[0] = card_area[parseInt(sId.substr(0, 2))];
card_info[1] = sBirthday;
card_info[2] = sId.substr(16, 1) % 2 ? \'男\' : \'女\';
return card_info;
},
//--获取变量的类型， object，string，int.....等
type:function(type)
{
if(is.object(type)) {
return \'object\';
}else if (is.string(type)) {
return \'string\';
}else if (is.int(type)) {
return \'int\';
}else if (is.double(type)) {
return \'double\';
}else {
return \'null\';
}
},
//-- 变量是否是对象，返回 true|false
object:function(type)
{
return \'object\' == typeof(type) ? true:false;
},
//-- 变量是否是字符串 ， 返回 true|false
string:function(type)
{
return \'string\' == typeof(type) ? true:false;
},
//-- 变量是否是整型，返回 true|false
int:function(type)
{
if (\'number\' == typeof(type)) {
if(0 > type.toString().indexOf(\'.\')) {
return true;
}
}
return false;
},
//-- 变量是否是小数，返回 true|false
double:function(type)
{
if(\'number\' == typeof(type)) {
if (0<=type.toString().indexOf(\'.\')) {
return true;
}
}
return false;
}
}
var file = {
//--异步文件上传
upload:function (json)
{
var post = new XMLHttpRequest();
var FLIE = new Object();
var json = is.object(json) ? json : string.toJson(json);
var dataType = string.eqlower(json.dataType,\'json\') ? true : false;
var fileSize = 0;
if(!json.url&&json.error) {
json.error(404);
return;
}
if(!is.object(json.file)) {
FLIE.id = get.Id(json.file);
//-- 大文件处理
if(json.maxfile) {
//--文件总大小
fileSize = file.getSize(FLIE.id);
//--以2M为单位进行文件切割
shardSize = 1024 * 1024 << 1;
//--总片数
shardCount = Math.ceil(fileSize / shardSize);
for(var i = 0; i < shardCount; ++i)
{
//--计算每一片的起始与结束位置
var start = i * shardSize;
var end = Math.min(fileSize, start + shardSize);
var formData = new FormData();
//--slice方法用于切出文件的一部分
formData.append(json.file, FLIE.id.files[0].slice(start,end));
formData.append(\"total\", shardCount); //总片数
formData.append(\"index\", i + 1); //当前是第几片
post.upload.addEventListener(\'progress\', callback, false);
post.open(\'post\', json.url, true); // 异步传输
post.send(formData);
post.upload.onprogress = function (ev) {
if(file.getProgress(ev) == 100) {
json.success(ev);
}
}
}
}else {
var formData = new FormData();
formData.append(json.file, FLIE.id.files[0]);
if (json.progress) {
post.upload.addEventListener(\'progress\', json.progress, false);
}
post.open(\'post\', json.url, true); // 异步传输
post.send(formData);
/*post.upload.onprogress = function (ev) {
if(file.getProgress(ev) == 100) {
json.success(ev);
}
}*/
post.onreadystatechange = function () {
switch (post.readyState) {
case 1:{break;}
case 2:{break;}
case 3:{break;}
case 4:{
if (post.status == 200 || post.status == 0) {
json.success(string.toJson(post.responseText));
}
break;
}
}
}
}
}
},
//-- 获得上传文件的进度值
getProgress:function (evt) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
return percentComplete.toString();
},
//-- 获得文件的大小
getSize:function (file) {
var FILE = get.Id(file).files[0];
var fileSize = 0;
if (file.size > 1024 * 1024) {
fileSize = (Math.round(FILE.size * 100 / (1024 * 1024)) / 100).toString();
} else {
fileSize = (Math.round(FILE.size * 100 / 1024) / 100).toString();
}
return fileSize;
},
//-- 获得文件的类型
getType:function (file) {
var FILE = get.Id(file).files[0];
return FILE.type;
},
//-- 获得文件的名字
getName:function (file) {
var FILE = get.Id(file).files[0];
return FILE.name;
},
//--包含文件
include:function (path) {
}
}
//--Ajax数据提交类
var Call = {
/**
* 参数为json对象|Json字符串，
* @type post|get 默认为get ，请求方式
* @url String 字符串型 ,请求地址
* @loading bool true|false 是否开启动画
* @time int 动画时间 如果 loading 为false 则不用设置这个参数
* @data Json | String 提交的数据
* @sucess 回调函数 这个必须有
*/
Ajax:function(json){
var json = is.object(json)?json:string.toJson(json);
var type = (json.type == undefined) || (json.type == \'\') ? \'get\' : json.type; ;
var url = (json.url == undefined) || (json.url == \'\') ? alert(\'请求url不能为空\') : json.url;
var loading = (json.Loading == undefined) || (json.Loading == \'\') ? false : json.Loading;
var time = (json.time == undefined) || (json.time == \'\') ? 2000 : json.time;
var dataType = string.eqlower(json.dataType,\'json\') ? \'json\' : \'string\';
if(loading) { var L = Loading.start(); }
var data = \'\';
if(is.object(json.data)) {
if(json.data) {
for(d in json.data) {
data = data + d + \'=\' + json.data[d] + \'&\';
}
}
if(string.eqlower(json.type,\'get\')) {
data =\'?\' + data.substring(0, data.length-1);
}
}else{
if(json.data.length>=1) {
data = json.data.indexOf(\'?\') < 0 ? \'?\'+json.data:json.data+\'\';
}
}
try {
//--IE高版本创建XMLHTTP
XMLHttpReq = new ActiveXObject(\'Msxml2.XMLHTTP\');
}
catch(E) {
try {
XMLHttpReq = new ActiveXObject(\'Microsoft.XMLHTTP\');//IE低版本创建XMLHTTP
}
catch(E) {
XMLHttpReq = new XMLHttpRequest();//兼容非IE浏览器，直接创建XMLHTTP对象
}
}
if(XMLHttpReq) {
if (string.eqlower(json.type, \'post\')) {
XMLHttpReq.open(\'post\', url, true);
XMLHttpReq.setRequestHeader(\'Content-Type\', \'application/x-www-form-urlencoded\');
XMLHttpReq.send(data);
}else if (string.eqlower(json.type, \'get\')) {
XMLHttpReq.open(\'get\', url+data, true);
XMLHttpReq.send(null);
}
XMLHttpReq.onreadystatechange = function () {
switch (XMLHttpReq.readyState) {
case 1:{break;}
case 2:{break;}
case 3:{break;}
case 4:{
if (XMLHttpReq.status == 200 || XMLHttpReq.status == 0) {
if (loading) {
setTimeout(function(){
Loading.stop(L);
if(json.dataType == \'json\')
json.success(string.toJson(XMLHttpReq.responseText));
else
json.success(XMLHttpReq.responseText)
}, time*1000);
}else {
if(json.dataType == \'json\')
json.success(string.toJson(XMLHttpReq.responseText));
else
json.success(XMLHttpReq.responseText)
}
}
break;
}
}
}
}
}
}
var Loading = {
//-- Ajax动画
start:function(){
var d = add.Dom(document.body,\'style\');
d.innerHTML = \'@keyframes d{from {left:0px;}to {left:98%;}}\';
var back = add.Dom(document.body, \'div\');
var d0 = add.Dom(back, \'div\');
var d1 = add.Dom(d0, \'div\');
var d2 = add.Dom(d0, \'div\');
var d3 = add.Dom(d0, \'div\');
var d4 = add.Dom(d0, \'div\');
add.Attr(back, \'style\', \'width:100%;height:100%;filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; background:#000; position:fixed; left:0px; top:0px; z-index;1000;\');
add.Attr(d0, \'style\', \'position:relative; top:50%; width:100%; height:30px;\');
add.Attr(d1, \'style\', \'height:15px; width:15px; position:absolute; background:#ABCDEF; animation:d 2s infinite; -moz-border-radius:15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px; \');
add.Attr(d2, \'style\', \'height:15px; width:15px; position:absolute; background:#ABCDEF; animation:d 3s infinite; -moz-border-radius:15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px; \');
add.Attr(d3, \'style\', \'height:15px; width:15px; position:absolute; background:#ABCDEF; animation:d 4s infinite; -moz-border-radius:15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px; \');
add.Attr(d4, \'style\', \'height:15px; width:15px; position:absolute; background:#ABCDEF; animation:d 5s infinite; -moz-border-radius:15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px; \');
var div = { domback:back, dom0:d0, dom1:d1, dom2:d2, dom3:d3, dom4:d4 }
return div;
},
//-- Ajax停止动画
stop:function(d) {
d.dom0.parentNode.removeChild(d.dom0);
d.dom1.parentNode.removeChild(d.dom1);
d.dom2.parentNode.removeChild(d.dom2);
d.dom3.parentNode.removeChild(d.dom3);
d.dom4.parentNode.removeChild(d.dom4);
d.domback.parentNode.removeChild(d.domback);
}
}
var del = {
Dom:function(obj) {
obj.parentNode.removeChild(obj);
}
}
var add = {
//--动态添加Dom节点
Dom:function (obj,dom) {
var dom = document.createElement(dom);
get.Id(obj).appendChild(dom);
return dom;
},
//-- 动态添加属性
Attr:function(obj,key,value){
obj.setAttribute(key, value);
return obj;
}
}
//--URL编码
function url(Str){
return decodeURI(Str);
}
/**
* 模板字符串，语法标签采用<js></js>
* 完全遵循javascript原生语法
* @param template
* @param vars
* @returns {Function}
*/
function js_template(template, vars) {
//唯一分隔标志字符串
var split = \'_{\' + Math.random() + \'}_\';
//消除换行符
var estr = template.replace(/\\n|\\r|\\t/g, \'\');
var js = [];
/****
* 匹配标签<js> ...</js>--并且替换为特定的分隔串，
* 并将匹配的js代码放入js数组中备用
* */
estr = estr.replace(/<js>(.*?)<\\/js>/g, function ($0, $1) {
js.push($1);
return split;
});
/*根据特定的分隔串分隔得到普通text文本串的数组*/
var text = estr.split(split);
estr = \" var output=\'\';\";
/****
* 0101010---0为text[]元素,1为js[]元素
* 重新串起来连接为可执行eval的estr
* **/
for (var i = 0; i < js.length; ++i) {
estr += \'output+=text[\' + i + \'];\';
estr += js[i];
}
estr += \'output+=text[\' + js.length + \'];\';
estr += \'return output;\';
var fun =new Function(\'vars\',\'text\',estr);
return function(data){
return fun.apply(null,[data,text]);
}
}
2. add.html
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>Lumino Pro - Dashboard</title>
<link href=\"__SOURCE__/css/bootstrap.min.css\" rel=\"stylesheet\">
<link href=\"__SOURCE__/css/datepicker3.css\" rel=\"stylesheet\">
<link href=\"__SOURCE__/css/styles.css\" rel=\"stylesheet\">
<link href=\"__SOURCE__/css/Table.css\" rel=\"stylesheet\">
<link href=\"__SOURCE__/css/dt.css\" rel=\"stylesheet\">
<link href=\"__SOURCE__/css/plus/buttons.css\" rel=\"stylesheet\">
<link href=\"__SOURCE__/css/file.css\" rel=\"stylesheet\">
<link href=\"__SOURCE__/css/webuploader.css\" rel=\"stylesheet\">
<link href=\"__SOURCE__/css/plus/bootstrap-switch.min.css\" rel=\"stylesheet\">
<link href=\'http://fonts.useso.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic\' rel=\'stylesheet\' type=\'text/css\'>
<!--[if lt IE 9]>
<link href=\"__SOURCE__/css/rgba-fallback.css\" rel=\"stylesheet\">
<script src=\"__SOURCE__/js/html5shiv.js\"></script>
<script src=\"__SOURCE__/js/respond.min.js\"></script>
<![endif]-->
</head>
<body>
<include file=\"Apps/Admin/View/include/nav.html\"/>
<div id=\"sidebar-collapse\" class=\"col-sm-3 col-lg-2 sidebar\">
<form role=\"search\">
<div class=\"form-group\">
<input type=\"text\" class=\"form-control\" placeholder=\"Search\">
</div>
</form>
<include file=\"Apps/Admin/View/include/menu.html\"/>
</div><!--/.sidebar-->
<div class=\"col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main\">
<div class=\"row\">
<ol class=\"breadcrumb\">
<li><a href=\"#\"><span class=\"glyphicon glyphicon-home\"></span></a></li>
<li class=\"active\">Dashboard</li>
</ol>
</div>
<div class=\"row col-no-gutter-container\">
<div class=\"panel panel-default\">
<div class=\"panel-heading\">Banner添加
<button id=\'up\' type=\"button\" style=\'float:right; margin:4px;\"\' class=\"btn btn-default\"><span class=\"glyphicon glyphicon-plus\"></span>上传</button>
<button id=\'add\' type=\"button\" style=\'float:right; margin:4px;\"\' class=\"btn btn-default\"><span class=\"glyphicon glyphicon-plus\"></span>确定添加</button>
</div>
<div class=\"panel-body\">
<div class=\"canvas-wrapper\">
<form id=\'banner\'>
<dl class=\'dt\'>
<dd><label>Banner名字</label></dd>
<dt>
<div class=\"form-group has-success\">
<input name=\'name\' class=\"form-control\" placeholder=\"Banner名字\" value=\'\'>
</div>
</dt>
<div style=\'clear:both;\'></div>
<dd><label>Banner类型:</label></dd>
<dt>
<div class=\"form-group has-warning\">
<select name=\'type\' class=\"form-control\" style=\'background:rgb(31,45,55); color:#FFF;\'>
<option value=\'1\' style=\' font-size:18px;\'>首页</option>
<option value=\'2\' style=\' font-size:18px;\'>内页广告</option>
</select>
</div>
</dt>
<div style=\'clear:both;\'></div>
<dd><label>Banner链接地址:</label></dd>
<dt>
<div class=\"form-group has-warning\">
<input name=\'link\' class=\"form-control\" placeholder=\"Banner链接地址\" value=\'\'>
</div>
</dt>
</dl>
<dl class=\'dt\'>
<dd><label>Banner上传:</label></dd>
<dt>
<div class=\"form-group has-warning\">
<input class=\"form-control\" type = \'button\' value=\'选择文件\'>
<input id=\'files\' type=\'file\' class=\"file\">
</div>
</dt>
<div style=\'clear:both;\'></div>
<dd><label>文件类型:</label></dd>
<dt>
<div class=\"form-group has-warning\">
<div id=\'filetype\' class=\'left\' style=\'padding-top:2px;\'></div>
</div>
</dt>
<div style=\'clear:both;\'></div>
<dd><label>文件上传进度:</label></dd>
<dt>
<div class=\'form-control\' style=\'padding:2px; height:26px; overflow:hidden;\'>
<!-- <div id=\'progress\' style=\'background:#ABCDEF; width:0px; height:22px;\'></div> -->
<progress id=\'progress\' max=\"100\" value=\'0\' style=\'width:100%; height:22px; background:#30a5ff;\'>o(︶︿︶)o</progress>
<div id=\'gress\' height:0px; style=\'padding-top:2px; color:#FFF; position:relative; bottom:28px; left:40%;\'></div>
</div>
<div id=\'fileSize\' class=\'right\' style=\'padding-top:2px;\'>
<span class=\'left\'></span>
<span></span>
</div>
</dt>
</dl>
</form>
<div style=\'clear:both;\'></div>
<div class=\'fixed-table-container\' style=\'height:244px;\'>
<img class=\'left\' id =\'thmb\' src=\'\'>
<div>
<ul class=\'ul-info\' style=\'display:none;\'>
<li><span class=\'left\'>文件大小:</span><p>22222kb</p></li>
<li><span class=\'left\'>文件路径:</span><p>22222kb</p></li>
<li><span class=\'left\'>图片高度:</span><p>22222kb</p></li>
<li><span class=\'left\'>图片宽度:</span><p>22222kb</p></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div> <!--/.main-->
</div>
<script src=\"__SOURCE__/js/jquery-1.11.1.min.js\"></script>
<script src=\"__SOURCE__/js/bootstrap.min.js\"></script>
<script src=\"__SOURCE__/js/file.js\"></script>
<script type=\"text/javascript\" src=\"__SOURCE__/js/plus/bootstrap-datetimepicker.de.js\" charset=\"UTF-8\"></script>
<script src=\"__SOURCE__/js/plus/bootstrap-switch.min.js\"></script>
<script src=\"__SOURCE__/js/table.js\"></script>
<script type=\"text/javascript\" src=\'__SOURCE__/js/lib.js\'></script>
<script>
var data = new Object();
get.Id(\'files\').onchange = function () {
get.filepath(this,function(str){
get.Id(\'thmb\').src = str;
});
set.html(filetype,file.getName(\'files\'));
get.Id(\'progress\').value = 0;
set.html(get.Id(\'gress\'),\'\');
set.html(get.Tag(get.Id(\'fileSize\'), \'span\')[0], file.getSize(\'files\') + \'KB\');
set.html(get.Tag(get.Id(\'fileSize\'), \'span\')[1], \'/0kb\');
}
get.Id(\'up\').onclick = function () {
if(file.getSize(\'files\')<=0) {
return false;
}
file.upload({
form:\'banner\', //form的id
url:\'{:U(\'Banner/add\',0,0)}\', //上传请求文件的地址
//maxfile:true, //是否启用大文件上传
dataType:\'json\',
progress:function(ev) { //--上传中的进度回掉函数
get.Id(\'progress\').value = file.getProgress(ev);
//获得上传进度用file.getProgress(ev)
set.html(get.Id(\'gress\'),file.getProgress(ev)+\'%\');
set.html(get.Tag(get.Id(\'fileSize\'), \'span\')[1], \'/\' + file.getProgress(ev) * (file.getSize(\'files\') / 100 >>0) + \'KB\');
},
file:\'files\', //--文件输入框的id
//--上传完成后，后台返回的回调函数
success:function(e){
set.html(get.Tag(get.Id(\'fileSize\'), \'span\')[1], \'/\' + file.getSize(\'files\') + \'KB\');
set.html(get.Id(\'gress\'),\'上传完成\');
data.bannerWidth = e.bannerWidth;
data.bannerHeight = e.bannerHeight;
data.bannerTyle = e.bannerTyle;
data.bannerImg = e.bannerImg;
}
});
}
get.Id(\'add\').onclick = function () {
data.name = get.Name(\'name\')[0].value;
data.type = get.Name(\'type\')[0].value;
data.link = get.Name(\'link\')[0].value;
data.act = \'add\';
Call.Ajax({
type:\'post\', // 请求方式
Loading:true, // 是否启动动画
time:5, //动画显示几秒
url:\'{:U(\'Banner/add\',0,0)}?act=add\', //请求地址
data:data, //发送的数据
dataType:\'json\', //Ajax返回的数据类型 ，可以是String
success:function (e) { //回调函数
set.url(e.url);
}
});
}
</script>
</body>
</html>
希望本文所述对大家学习javascript程序设计有所帮助。
本文地址：https://www.stayed.cn/item/18704
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)