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

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

img

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

思路是隐藏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>

不知道你使用的是什么技术。根本的思路可以是设置这个标签的 display属性为 none .
如果你使用的是 jquery ，可以直接设置 $(选择器).hide() ，就隐藏了。
如果你是用的vue。。。我估计你不是vue，问这个问题的，应该不是vue .

<input id="myFile" type="file" onchange="filechange">


function filechange(){
var file =  myFile.files[0];
var p = document.createElement("p");
p.innerText = file.name;
myFile.parentNode.replaceChildren(myFile, p) // 报错就这两个参数换一下，我忘记那个在前面了
}

有用望采纳

1.通过class设置样式:.test{display:none};
2.上传成功后获取该元素，通过JS或者JQuery给这个元素添加class