Ersetzen Sie Eingabetyp=Datei durch Bild
P粉567281015
P粉567281015 2023-10-13 13:47:35
0
1
702

Wie viele Leute wollte ich das hässliche input type=file,并且我知道如果没有一些 hack 和/或 javascript 就无法完成。但是,问题是,就我而言,上传文件按钮仅用于上传图像(jpeg|jpg|png|gif),所以我想知道是否可以使用“clickable"-Bild genau an die Eingabetypdatei anpassen (zeigt den Dialog und zeigt dasselbe $_FILE auf der übermittelten Seite an).

Ich habe hier eine Problemumgehung gefunden, die ebenfalls interessant ist (aber in Chrome =/ nicht funktioniert).

Was machen Sie, wenn Sie der Dateischaltfläche etwas Stil verleihen möchten? Wenn Sie dazu eine Meinung haben, klicken Sie bitte auf die Antwortschaltfläche ;)

P粉567281015
P粉567281015

Antworte allen(1)
P粉158473780

这对我来说非常有效:

.image-upload>input {
  display: none;
}
<div class="image-upload">
  <label for="file-input">
    <img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
  </label>

  <input id="file-input" type="file" />
</div>

基本上,标签的 for 属性使得单击标签与单击指定的输入相同

此外,将显示属性设置为 none 可以使文件输入根本不呈现,从而将其隐藏得干净整洁。

在 Chrome 中进行了测试,但根据网络,应该适用于所有主要浏览器。 :)

编辑: 此处添加了 JSFiddle: https://jsfiddle.net/c5s42vdz/

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage