Schlagwort: vorschau

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.