js笔记 demo篇 （四）拖拽上传展示，进度条

最近忙的懵逼，又很久没更新了，忙里偷闲更一篇。

h5： 拖拽接口

在h5中提供了很多接口，其中就有拖拽，这里只介绍拖拽上传用得到的几个：

dragenter    --> 进入元素范围时触发
dragleave    --> 离开元素范围时触发
dragover      --> 悬浮在元素上时触发（持续触发）
drop             --> 在元素上松开拖拽（拖拽完成）

// 需要注意的是，官方建议用addEventListener绑定事件
document.addEventListener('dragenter', function () {
	console.log('dragenter');
}, false);

document.addEventListener('dragleave', function () {
	console.log('dragleave');
}, false);
//在拖拽读取文件 dragover要阻止默认事件 否则drop没法触发
document.addEventListener('dragover', function () {
	console.log('dragover');
}, false);
//在拖拽读取文件 drop事件也需要阻止默认事件 否则文件会被浏览器读取
document.addEventListener('drop', function () {
	console.log('drop');
}, false);

drop事件默认可以接收一个参数这个参数中可以接受文件信息，当在指定区域内松开文件，触发drop事件就可以读取到文件信息：

document.addEventListener('dragenter', function () {
	console.log('进入区域');
}, false);

document.addEventListener('dragleave', function () {
     console.log('离开区域');
}, false);
document.addEventListener('dragover', function () {
	console.log('松手上传');
}, false);
// ev.dataTransfer.files 是有文件信息的类数组
oDrag.addEventListener('drop', function (ev) {
	console.log(ev)
}, false);

ok搞明白了拖拽怎么接收到文件，接下来就是上传。

ajax获取上传进度

ajax用的是XMLHttpRequest构造函数（这里指的是现在的主流，别抬杠）,它上面有很多对象和事件，其中获取上传进度的是upload对象上的progress事件，注意最好也用addEventListener绑定事件。那么简单封装一下呢，（ps：js库中也有获取进度的方法，不在今天研究范围之内）

function ajax(type, url, data, callback) {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject('Microsoft.XMLHttp');
            }
            type = type.toUpperCase()
            xhr.upload.addEventListener("progress", uploadProgress, false);
            if (type == 'GET') {
                xhr.open(type, url + '?' + data, true);
                xhr.send();
            } else if (type == 'POST') {
                xhr.open(type, url, true);
                xhr.send(data);
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    callback(xhr.responseText);
                }
            }
        }

估计大家发现了我没有设置header，这里注意了用ajax上传文件时不要设置header这个大天坑困扰我很久。。。
ok用这个写个小demo喽，后台的代码在这里就不介绍了， 用的是nodejs+express+multer实现的上传。下附git地址与展示地址(ps:样式不是很好看毕竟不是设计出身写的也仓促。。。嘻嘻)：

gitHub地址，clone后node sever.js
demo展示地址