upload – Welt Held

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.

[AcceptVerbs(HttpVerbs.Post)] public string UploadImage() { // Datei speichern var identifier = Guid.NewGuid(); string[] fileExt = Request.Files[0].FileName.Split('.'); string safeFile = identifier + "." + fileExt[fileExt.Length - 1]; Request.Files[0].SaveAs(Path.Combine(HostingEnvironment.MapPath("~/UploadedImages/"), safeFile)); // Daten an CKEditor zurück geben string result = "<script type=\"text/javascript\">"; result += "window.parent.CKEDITOR.tools.callFunction(" + Request.QueryString["CKEditorFuncNum"] + ", \"" + Path.Combine(Url.Content("~/UploadedImages/"), safeFile) + "\",\"\");</script>"; return result; }

Schlagwort: upload

Vorschau bei Bildupload

HowTo: Bilder mit CKEditor und ASP.NET MVC hochladen