HTML5 FileUpload

In HTML ist der input type file nicht besonders schön anzusehen, daher schreit das gerade zu nach einer Änderung.

Der Trick besteht darin, das eigentliche <input type="file" /> zu verstecken und ein anderes Element als Button zu misbrauchen. Das Verstecken wird über CSS gelöst (LESS Version):

.fileUploadButton {
	position: relative;
	overflow: hidden;
	margin: 0 0 0 45px;
	input.upload {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		padding: 0;
		font-size: 20px;
		cursor: pointer;
		opacity: 0;
		filter: alpha(opacity=0);
	}
}

Dazu das passende HTML hier noch mit dem Twitter Bootstrap CSS gelöst - da ich es meistens selbst verwende:

<div class="fileUploadButton btn btn-primary">
	<span>Jetzt hochladen</span>
	<input name="file" type="file" class="upload" accept="image/*" />
</div>

Einen weiteren Tipp gibt es auch hier bei Stackoverflow.