拖拽上传文件实现方案

199 阅读1分钟

1.屏蔽拖拽默认事件

document.addEventListener('dragleave',(e)=>{
    e.stopPropagation()
    e.preventDefault()
},false)

document.addEventListener('dragenter',(e)=>{
    e.stopPropagation()
    e.preventDefault()
},false)

document.addEventListener('dragover',(e)=>{
    e.stopPropagation()
    e.preventDefault()
},false)

document.addEventListener('drop',dragHandle)

2.获取拖拽文件

dragHandle(event){
    event.preventDefault()
    let _this=this
    if(event.dataTransfer.files.length>0){
        let fileread=new FileReader()
        fileread.onloadend=function(e){
            console.log(e.target.result)
        }
        let type='GB2312'
        fileread.readAsText(event.dataTransfer.files[0],type)
    }
}