请问怎样编辑input里面的类型type="file" 的显示名字呢?

请问怎样编辑input里面的类型type="file" 的显示名字呢?设置value不行。
我的需求是:手动选择文件。并导入到下面的输入框中。不需要上传到服务器。编辑完之后再手动上传即可。

我的问题是:
之前我把2个步骤分开写的:先点前面的按钮选择文件。再点后面的按钮导入文本。

但是现在需要我把这个2个按钮合并在一起。在选择文件之后。直接导入文本。
我之前用的方法是:
<input type="file" class="file"/>加上一个el-button
**现在合并的话使用el的上传组件似乎不行。因为我不需要上传到服务器。
而且我想修改input里面文字,默认显示的是:选择文件。但是我想显示成:选择文件并上传。但是不知道如何修改这个input的属性?请问还有没有其他方法或者插件可以实现我的功能呢?**

如图:
image.png

阅读 5.6k
3 个回答

你可以把点击input的逻辑放到点击“导入文本”按钮中,如:

importText() {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.txt'
  input.click()
  input.addEventListener('input', ($e) => {
    const file = $e.target.files[0]
    // 处理文件逻辑
  })
}

你把默认的input隐藏一下,然后你自己搞个span来显示。至于你说的input单击问题,有两个方案

  1. input透明浮起来
  2. label标签的for属性
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题