Hallo zusammen,
ich habe jetzt eine passende Vorlage mit JavaScript für ein Upload-Feld gefunden und testweise in die Homepage eingebunden. Aber dabei ist mir vermutlich ein Fehler unterlaufen den ich leider bislang nicht finden konnte. Denn wenn man nun auf den Button "Durchsuchen" klickt sieht man nur noch eine leere Webseite anstatt, dass sich der Windows-Explorer öffnet für die Dateiauswahl. Welcher Fehler könnte mir da unterlaufen sein? Kann mir hierzu bitte jemand mitteilen woran das Problem liegt.
Link zur Vorlage vom Upload-Feld: https://itnext.io/how-to-make-a-cust...t-c39e3f981b06
Link zur Homepage mit der Vorlage: http://sub.musikverein-hirschzell.de...kt-intern.html
Nachfolgend der von mir verwendete Code.
HTML
HTML-Code:
<div class="input-container">
<input id="real-input" type="file">
<button class="browse-btn">Durchsuchen</button>
<span class="file-info">Datei auswählen</span>
</div>
CSS
Code:
.input-container {
height:22px;
width:352px;
background-color:#ffffe1;
border:1px solid #707070;
border-radius:4px;
}
input[type='file'] {
display: none;
}
.file-info {
display: block;
margin-left:5px;
font-size:0.9em;
color:#6d6d6d;
}
.browse-btn {
text-align:center;
padding:4px;
color:#fff8ea;
font-size:12px;
font-weight:bold;
text-decoration:none;
cursor:pointer;
border:none;
border-top-left-radius:4px;
border-bottom-left-radius:4px;
background-image:linear-gradient(to bottom, #a29c90, #544f43 55%, #544f43);
}
.browse-btn:hover {
color:#600;
background-image:linear-gradient(to bottom, #f0efe5, #a49e92 55%, #a49e92);
}
button.browse-btn {
width:116px;
}
JavaScript
Code:
const uploadButton = document.querySelector('.browse-btn');
const fileInfo = document.querySelector('.file-info');
const realInput = document.getElementById('real-input');
uploadButton.addEventListener('click', (e) => {
realInput.click();
});
realInput.addEventListener('change', () => {
const name = realInput.value.split(/\\|\//).pop();
const truncated = name.length > 20
? name.substr(name.length - 20)
: name;
fileInfo.innerHTML = truncated;
});
Danke!
Gruß
Thomas
Lesezeichen