选择文件如何控制，已经选择了一个文件再选时就必须也在当前文件夹选 js

一、原生方式

可以使用 input 标签的 accept 属性来限制用户选择的文件类型。例如，如果你想让用户只能选择 js 文件，可以这样写：

这样用户在选择文件时，只能看到当前文件夹下的 js 文件。如果你想让用户在已经选择了一个文件后，再次选择文件时只能在当前文件夹选 js 文件，可以通过 JavaScript 来实现。具体做法是，在用户选择文件后，记录下当前文件所在的文件夹路径，然后在下一次选择文件时，只显示该文件夹下的 js 文件。示例代码如下：

<input type="file" accept=".js">
<input type="file" id="file-input" accept=".js">

<script>
  const fileInput = document.getElementById('file-input');
  let currentFolder = null;

  fileInput.addEventListener('change', () => {
    // 记录当前文件所在的文件夹路径
    currentFolder = fileInput.files[0].webkitRelativePath.split('/')[0];  });

  fileInput.addEventListener('click', () => {
    // 如果已经选择了一个文件，则限制下一次选择的文件只能在当前文件夹选 js 文件
    if (currentFolder) {
      fileInput.setAttribute('webkitdirectory', currentFolder);
      fileInput.setAttribute('directory', currentFolder);
      fileInput.setAttribute('accept', `${currentFolder}/*.js`);
    }
  });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

二、element ui组件方式

在 Element UI 中，可以使用 el-upload 组件来实现文件上传功能。如果需要控制只能选择当前文件夹内的文件，可以通过设置 before-upload 属性来实现。具体做法是在 before-upload 方法中获取当前文件夹的路径，然后判断上传的文件是否在该路径下。

以下是一个示例代码：

<el-upload
  class="upload-demo"
  action="/upload"
  :before-upload="beforeUpload"
>
  <el-button slot="trigger" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" type="success">上传到服务器</el-button>
</el-upload>

methods: {
  beforeUpload(file) {
    // 获取当前文件夹路径
    const currentPath = file.webkitRelativePath.split('/')[0];
    // 判断上传的文件是否在当前文件夹内
    if (file.webkitRelativePath.indexOf(currentPath) !== 0) {
      this.$message.error('只能上传当前文件夹内的文件');
      return false;
    }
    return true;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21