原生JS上传文件夹，阻止浏览器默认弹窗（上传文件夹的弹窗）

最近在工做中遇到一个上传文档的需求，用elementUI组件没有上传文件夹功能，只有上传文档功能，在开发过程当中遇到以下几个问题，在此总结一下。

一、input框支持上传文件夹，必需要在input标签添加webkitdirectory属性。（上传文件夹功能不是全部浏览器都支持）

<input type="file" webkitdirectory />

二、项目需求：第一次点击长传文件夹长传成功以后，第二次点击给出提示框，只能长传一次。在这里我一开始的思路是input触发的onchange事件，去onchange事件监听阻止掉默认行为，后来才发现点击input框以后，给的上传文件夹弹窗是在click事件的时候触发的，因此想要阻止掉浏览器弹窗，就在input标签上绑定一个click事件，在click事件中阻止浏览器默认行为，弹窗就不会出现。如下代码是以vue框架为基础写的。

1）在input标签绑定一个click事件

<input type="file" webkitdirectory @click="fileUploadCheck">

2）在methods里面给这个方法作出相应的校验，知足需求阻止浏览器默认行为

fileUploadCheck(){
     // .....根据项目需求作校验，知足条件阻止浏览器默认行为
     if(e&&e.preventDefault) {
       e.preventDefault();
     }

   }

三、若是想要阻止elementUI的上传文档组件的弹窗，咱们还得经过JS获取到input元素，给他添加一个click事件。在这里我遇到一个问题是，经过原生JS给元素绑定事件，在if判断里不能移除这次事件，上传文档的弹窗被阻止以后，就一致被阻止掉。我想要条件容许时，给这个弹窗又能够出现。最终我给他添加绑定事件的时候，下一句代码就移除这个事件。

 fileUploadCheck(){
      let inputFile = document.getElementById('inputfile') //获取到input框
      let hanle = function(event){  //阻止浏览器默认事件
        if(event.preventDefault && event){
          event.preventDefault()
        }
      }
      if(!this.flag){ //此变量是判断是否已经上传文件
        inputFile.addEventListener('click',hanle,false)  //知足条件给input绑定事件
        this.$message('文档和文件夹只能上传一次')
        setTimeout(function(){
          inputFile.removeEventListener('click',hanle,false)  //移除事件
        },500)
      }else {
        //若是将 inputFile.removeEventListener('click',hanle,false)写在else,不能移除hanle事件
      }
    }