Zum Inhalt springen

Archiv

Tag: upload

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.

Ich hatte gerade das Problem, dass ich mit dem WYSIWYG-Editor CKEditor Bilder hoch laden möchte, um sie direkt in meinen Text einzupflegen.
Dazu wird irgendwo im View der Editor definiert:

  <script type="text/javascript">
      window.onload = function() {
          CKEDITOR.replace('ckEditor', {
            skin: 'office2003',            
            filebrowserUploadUrl: '<%=Url.Action("UploadImage") %>'
      });
  };
  
</script>

Wichtig ist hier der Parameter „filebrowserUploadUrl“. Dies ist der Pfad, wohin das Bild beim Upload gesendet wird.
Im Controller wird das ganze nun verarbeitet:

        [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;
        }

Erst speicher ich das Bild irgendwo und gebe dann den Pfad per Javascript zurück. Da ich nur das JS ausführen lassen muss, gebe ich kein komplettes View zurück. Die Url wird dann korrekt an CKEditor übergeben (siehe Screenshots). Der letzte Parameter des callFunction()-Aufrufes kann für Fehlermeldungen genutzt werden, Bild zu groß o.ä.
Mich hat dieser kleine Aufruf bestimmt eine Stunde gekostet!

CKEditor - Datei auswählen, Hochladen CKEditor - Datei hochgeladen und Pfad übergeben