前端实现选择文件夹功能 并获取文件夹名 input webkitdirectory

我们都知道input标签type="file"的时候,会打开一个文件选择器,但并不支持选择目录。

前端实现选择文件夹功能 并获取文件夹名 input webkitdirectory_第1张图片

 

如果要支持选择目录,且必须只是目录的话,用下列的代码:

 

change绑定了一个函数,函数的内容为:

triggerFile(event) {
      let file = event.target.files;
      console.log(file);
    },

这样就可以获得文件夹的名字了,之后可以进行下一步操作。

前端实现选择文件夹功能 并获取文件夹名 input webkitdirectory_第2张图片

如果是想要上传文件,用iview等框架的upload即可,本文不再赘述。

你可能感兴趣的:(前端,vue.js,html5,javascript)