Ich finde es ein nettes Feature, eine kleine Vorschau anzuzeigen, wenn ich ein Bild auf einer Webseite hochladen will.
Dazu folgendes kleines Snippet:
$(function() {
$("#fileUpload").change(function() {
if (this.files && this.files[0]) {
var file = this.files[0];
var preview = $('#imagePreview');
var isImage = typeof file.type !== "undefined" && file.name.match(/\.(png|jpe?g)$/i);
if (isImage && typeof FileReader !== "undefined") {
var reader = new FileReader();
reader.onload = function(e) {
preview.empty();
var img = $('<img>');
img.attr('src', e.target.result);
if (preview.css('max-height') != 'none') {
img.css('max-height', parseInt(preview.css('max-height'), 10));
}
preview.html(img);
}
reader.readAsDataURL(this.files[0]);
preview.show();
} else {
preview.empty();
preview.html($('<p>').text('Dateiname: ' + file.name));
preview.show();
}
}
});
});
Das passende Formular dazu:
<div class="form-group">
<label for="fileUpload" class="control-label col-md-2">Datei: </label>
<div class="col-md-10">
<input type="file" name="fileUpload" id="fileUpload"/>
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2 fileInputPreview" id="imagePreview">
<!-- empty tag for preview image -->
</div>
</div>
Die passenden CSS Klassen, damit das Bild auch nicht aus dem Design rauswandert 🙂
.fileInputPreview {
display: inline-block;
max-height: 200px;
width: 500px;
}
.fileInputPreview img {
max-width: 100%;
height: auto;
}
Am Ende sieht es dann etwa so aus:
Den File-Upload habe ich mit Bootstrap FileStyle optisch etwas ansprechender gestaltet.