选择文件如何控制,已经选择了一个文件再选时就必须也在当前文件夹选 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>
二、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;
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值