Schlagwort: jquery

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:

$(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:
imagePreview

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

jQuery – Seitennavigation abbrechen

Fast jedes Programm weißt den Benutzer darauf hin, wenn es ungespeicherte Änderungen gibt, sobald man das Programm verlassen will.
Im Browser gibt es sowas standardmäßig nicht, aber dank JavaScript ist das kein Problem. Und mit jQuery wird die ganze Sache sogar noch einfacher.

Und zwar kann man sich an das „beforeUnload“-Event hängen. Hier wird der zu erscheinene Text hinterlegt. Weiteren Einfluss auf die Gestaltungsmöglichkeit hat man nicht, dies hängt vom Browser ab.

$("form").one("change", ":input", function() {
    // einen Hinweis anzeigen (wer es möchte)
    $('#saveInfo').show();

    // Bevor die Seite verlassen wird, wird der folgende Text angezeigt.
    $(window).on('beforeunload', function (e) {
            return "Es gibt ungespeicherte Änderungen.";
    });

    // Verhindern, dass ein Submit-Button (also z.B. "Speichern") auch den Hinweis hervorruft.
    $(this).parents("form:first").find(":submit").click(function() { $(window).off("beforeunload"); });
});

In dem Beispiel überwache ich alle Eingabefelder („:input„) innerhalb meiner Form. Sobald ein Feld geändert wird das „beforeunload“-Event scharf gemacht. Achtet auch auf die letzte Zeile, sollte ich über einen Submit-Button kommen („:submit„), wird das Event wieder aufgehoben. Schließlich will ich ja beim Klick auf „Speichern“ nicht den Hinweis bekommen.

ASP.NET MVC & Bootstrap 3.0: Client Validierung

Wie man die Server-Validierung für Bootstrap 3 ein wenig aufhübschen kann, habe ich ja bereits erklärt.

Nun wollte ich auch schauen, dass die Client-Variante etwas _bootstrappiger_ aussieht und bin auf folgenden Beitrag gestoßen. Sehr gut finde ich, dass hier sämtliche Standardmethoden genutzt werden und das Rad nicht neu erfunden wird. Das ganze ist nur für Bootstrap 2, daher habe ich noch ein wenig dran geschraubt.

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    }
});

$(function() {
    $('span.field-validation-valid, span.field-validation-error').each(function () {
        $(this).addClass('help-block');
    });
});

Im Prinzip habe ich wieder nur die CSS-Klassen angepasst und aus den Kommentaren die letzte Methode gezogen, um die Bootstrap-CSS-Klasse für die Hinweise anzufügen.
Damit das ganze auch funktioniert, muss darauf geachtet werden, dass der Code nach dem Laden der jQuery-Methoden erfolgt. Dazu habe ich in der BundleConfig.cs einfach das ScriptBundle angepasst:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
	"~/Scripts/jquery.unobtrusive*",
	"~/Scripts/jquery.validate*").Include("~/Scripts/wys.jquery.validate.bootstrap3.js"));

Ich habe die Datei bewusst mit einem Prefix versehen, denn nur mit dem Namen „jquery.validate.bootstrap3.js“ wäre die Datei vor den anderen jquery.validate-Javascript-Dateien geladen worden und hätte zu einem Javascript-Fehler geführt.

Buch: jQuery – Kurz und gut

Ich beschäftige mich immer mehr mit ASP.NET MVC und komme so nicht vor JavaScript Frameworks wie jQuery herum. Ich finde das Framework sehr mächtig und es erleichtert einem die Arbeit ungemein. Daher habe ich mir ein kleines Taschenbuch dazu gekauft:

jQuery - kurz und gut

Ich habe bis jetzt zwar nur mal kurz durchgeblättert, aber es scheint recht interessant zu sein und einen kleinen Einblick ins innere zu geben.
Nun brauch ich nur noch ein ordentliches Buch über LINQ