h5拖拽文件上传及进度条

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);

效果

h5拖拽文件上传及进度条

html5实现拖拽的几个事件

上传文件结合进度条

猜你喜欢