大海话语 2021-10-19 16:23 采纳率: 87.9%
浏览 54
已结题

上传文件后，将input标签 显示隐藏掉

有没有办法，将上传文件后，将

img

图中的标签隐藏掉。就是在上传文件后，将它隐藏掉，或者用文件名称替换掉这个标签的显示呢？谢谢

  • 写回答

4条回答 默认 最新

  • 在下月亮有何贵干 前端领域优质创作者 2021-10-19 16:49
    关注

    思路是隐藏file初始dom，然后用其他dom去替代，就可以去自定义你想要的样子，然后在file改变时调用，可以用.files获取到文件信息，这里用文件名赋值，有帮助希望采纳

    
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title> 页面名称 </title>
  <style type="text/css">

  </style>
</head>

<body>

  <input type="file" name="" id="file" style="display: none;" onchange="change()">
  <button style="cursor: pointer;border-radius: 4px;background-color: lightblue;" onclick="upload()"
    id="fileButton">请选择你的文件</button>

</body>

<script>

  const file = document.getElementById('file')
  const fileButton = document.getElementById('fileButton')

  function upload() {
    file.click()
  }

  function change() {
    fileButton.innerHTML = file.files[0] ? file.files[0].name : '请选择你的文件'
  }

</script>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 10月27日
  • 已采纳回答 10月19日
  • 创建了问题 10月19日

悬赏问题

  • ¥15 微信小程序 用oss下载 aliyun-oss-sdk-6.18.0.min client报错
  • ¥15 ArcGIS批量裁剪
  • ¥15 labview程序设计
  • ¥15 为什么在配置Linux系统的时候执行脚本总是出现E: Failed to fetch http:L/cn.archive.ubuntu.com
  • ¥15 Cloudreve保存用户组存储空间大小时报错
  • ¥15 伪标签为什么不能作为弱监督语义分割的结果？
  • ¥15 编一个判断一个区间范围内的数字的个位数的立方和是否等于其本身的程序在输入第1组数据后卡住了(语言-c语言)
  • ¥15 Mac版Fiddler Everywhere4.0.1提示强制更新
  • ¥15 android 集成sentry上报时报错。
  • ¥15 抖音看过的视频，缓存在哪个文件