html5实现拖拽的几个事件
绑定在拖拽元素上的事件
ondragstart 开始拖拽元素触发
ondrag 拖拽时触发
ondragend 拖拽完成触发
绑定在指定区域元素上的事件
这里需要注意的是,如果dragover事件中不阻止默认事件,drop事件就不会触发
var box = document.querySelector('.box');
//鼠标拖拽进入该区域
box.addEventListener('dragenter', function(){
box.innerHTML = '松开鼠标'; //区域内样式变化
}, false);
//鼠标拖拽离开该区域
box.addEventListener('dragleave', function(){
box.innerHTML = '请将文件拖至此区域' //区域内变回原来样式
}, false);
//只要鼠标拖拽悬停在该区域就会触发
box.addEventListener('dragover', function(e){
e.preventDefault(); //注意,如果dragover不阻止默认事件,drop事件就不会触发
console.log('dragover');
}, false);
//鼠标拖拽释放
box.addEventListener('drop', function(e){
e.preventDefault(); //浏览器默认会打开该文件,因此停掉该默认事件
console.log(e.dataTransfer.files); //选中的文件
}, false);
事件对象中有一个dataTransfer对象,该对象的files属性是你选中的文件,该对象还有setData()和getData()用来存值与取值,setData方法第一个参数是键名,第二个参数是要保存的值(都是字符串类型)。
上传文件结合进度条
进度条效果很简单,ajax2中的XMLHttpRequest对象提供了一个upload对象,upload对象主要用到onload(上传成功),onerror(上传出错),onprogress(上传进度)三个事件。其中onprogress事件对象中的loaded属性值是当前已上传数据大小,total属性值是上传数据总量,简单运算一下就可得出当前上传进度百分比,再结合h5中的progress标签使用。
//鼠标拖拽释放
box.addEventListener('drop', function(e){
e.preventDefault(); //浏览器默认会打开该文件,因此停掉该默认事件
// console.log(e.dataTransfer.files); //选中的文件
var files = e.dataTransfer.files;
console.log(files)
var formData = new FormData();
Array.prototype.slice.call(files).forEach(function(file){
formData.append('file', file);
});
var xhr = new XMLHttpRequest();
xhr.upload.onerror = function(){
alert('上传出错');
}
xhr.upload.onload = function(){
alert('上传成功');
}
xhr.upload.onprogress = function(e){
document.querySelector('progress').value = Math.floor(100*e.loaded/e.total);
}
xhr.open('post', '/upload', true);
xhr.send(formData)
}, false);
效果