Schlagwort: vorschau

Vorschau bei Bildupload

Ich finde es ein nettes Feature, eine kleine Vorschau anzuzeigen, wenn ich ein Bild auf einer Webseite hochladen will.
Dazu folgendes kleines Snippet:

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$(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:

?
01
02
03
04
05
06
07
08
09
10
11
12
<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 🙂

?
01
02
03
04
05
06
07
08
09
10
.fileInputPreview {
    display: inline-block;
    max-height: 200px;
    width: 500px;
}
 
.fileInputPreview img {
    max-width: 100%;
    height: auto;
}

Am Ende sieht es dann etwa so aus:
imagePreview

Den File-Upload habe ich mit Bootstrap FileStyle optisch etwas ansprechender gestaltet.

Opera und die Taskleiste unter Windows 7

Windows 7 gruppiert ja die Fenster und zeigt ja bei einem MouseOver alle Fenster an. Beim Internet Explorer zeigt er da alle Tabs an. Manche finden es praktisch, ich hingegen nicht. Tabs sollte er da nicht anzeigen, sondern die einzelnen Instanzen. Denn sonst bin ich wieder dort, wo ich vor den Tabs war, bei Sau vielen Einträgen in der Taskleiste. Nervig ist auch, wenn du wieder schnell in den Browser wechseln willst, dann musst du erstmal ein Fenster auswählen. Opera unterstützt es nun mit der neuen Version (10.51) auch.
Abschalten könnt ihr das mit folgendem Befehl:

?
1
opera:config#UserPrefs|UseWindows7TaskbarThumbnails

Hacken rausnehmen, Speichern, Opera neustarten und alles wie gewohnt 🙂

Man kann da auch noch einige andere nette Einstellungen vornehmen!