Wie kann ich Bilder in eine Datenbank schreiben und wieder auslesen?
Lösung
1: Erstellen der Datenbank
Als erstes wird für das Speichern der Bilder eine Datenbank benötigt. Dafür wird einfach ein neues Element erstellt, und zwar eine SQL-Datenbank. Diese sollte den Namen „BilderDB“ erhalten.
Nach dem die Datenbank angelegt wurde, kann man mit Hilfe des Datenbank-Explorer in die Datenbank blicken und dort neue Elemente anlegen.
2: Erstellen der Bilder-Tabelle
Um die Bilder abzuspeichern, wird eine Tabelle benötigt. Diese Tabelle sollte wie folgt definiert werden.
Für die Spalte „BildId“ ist es wichtig, dass bei Spalteneigenschaften die Eigenschaft Identitätsspezifikation auf Ja gestellt wird. Dadurch erhält jede Spalte einen eindeutigen Wert, der von Eins an immer weiter hochgezählt wird. Diese Spalte muss zusätzlich mit dem Schlüsselsymbol zum Primärschlüssel deklariert werden.
3: Erstellen der Datenzugriffsfunktionen
Um auf die Datenbanktabelle zuzugreifen gibt es verschiedene Wege. Einer dieser Wege ist der Zugriff mittels eines DataSets. Als erstes wird ein neues Element von Typ DataSet zum Projekt hinzugefügt. Dieses DataSet bekommt den Namen „Datenschicht“. Nach dem das DataSet hinzugefügt wurde, wird automatisch ein Assistent gestartet.
Im ersten Schritt bietet der Assistent an, eine bestimmte Datenbankverbindung auszuwählen.
Hier wird die Datenbank angegeben, die man in einem der vorherigen Schritte angelegt hat. Im nächsten Schritt hat man die Auswahl zwischen verschiedenen Formen von Datenbankabfragen. Hier wird SQL-Anweisung verwenden gewählt.
Der nächste Schritt umfasst die Auswahl der Daten, die man verwenden möchte. Dazu kann man den Abfrage-Generator verwenden, der einem per Dialog die erforderliche SQL-Anweisung generiert.
Die notwendige SQL-Anweisung muss „Select Bilder.* From Bilder“ lauten. Die nächsten Dialoge sind einfach zu bestätigen.
Im Anschluss daran hat man ein so genanntes DataSet, in dem die eigentliche Bildertabelle und ein dazugehöriger Adapter (BilderTableAdapter) enthalten sind.
4: Erstellen der Hochlade-Seite
Für das Hochladen der Bilder wird am besten eine neue Webseite erstellt. Auf dieser Webseite positioniert man ein FileUpload-Control, Button-Control und ein Label-Control.
Mit Hilfe des Button-Control wird die Upload-Operation erst gestartet, weil dadurch ein Postback zum Server und damit auch ein Upload der selektierten Datei durchgeführt wird.
Der notwendige Code im Button-Click-Ereignis muss dafür wie folgt aussehen:
protected void UploadButton_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
// Speichern des Bildes in der Datenbank mittels Adapter
DatenschichtTableAdapters.BilderTableAdapter adapter = new DatenschichtTableAdapters.BilderTableAdapter();
adapter.Insert(FileUpload1.FileName, FileUpload1.PostedFile.ContentLength
, FileUpload1.PostedFile.ContentType, FileUpload1.FileBytes);
// Info ausgeben
InformationLabel.Text = "Bild: " + FileUpload1.FileName + " wurde erfolgreich gespeichert.";
this.DataBind();
}
else
{
// Warnung ausgeben
InformationLabel.Text = "Keine Datei vorhanden.";
}
}
5: Auslesen eines Bildes aus der Datenbank
Damit man exakt ein Bild aus der Datenbank lesen kann, ist nur eine kleine Erweiterung an der Datenzugriffsschicht nötig. Das eben erstellte DataSet muss dazu um die Funktion erweitert werden. Dafür benötigt man eine kleine Erweiterung an der Datenschicht, die es erlaubt, exakt ein Bild basierend auf einer ID auszulesen.
Im Bereich des BilderTableAdapter fügt man mittels Rechtsklick mit Abfrage hinzufügen eine neue Abfrage hinzu. Die Einstellungen vom Assistenten können dabei alle so bleiben, wie sie voreingestellt sind, lediglich die eigentliche SQL-Abfrage muss wie folgt gefüllt werden:
SELECT BildId, BildName, BildGroesse, BildContentType, BildDaten
FROM Bilder
WHERE (BildId = @BildId)
Dadurch wird, basierend auf dem Parameter @BildId, nur maximal ein Bild geladen, falls die entsprechende BildId vorhanden ist.
Im letzten Schritt des Assistenten hat man die Möglichkeit zu wählen, welche Methoden automatisch generiert haben möchte. Die zu verwendenden Informationen befinden sich in der folgenden Abbildung.
6: Bild aus der Datenbank laden
Damit man nun ein Bild auf einer Webseite anzeigen kann, benötigt man einen kleinen Trick. Bilder können auf HTML-Seiten immer nur mit dem < IMG src="LinkAufBild" /> dargestellt werden. Bilder, die in einer Datenbank sind, kann man nicht per Link direkt anzeigen. Daher benötigt man eine Extra-Webseite mit einer Bild-ID, die man in diesen Link eintragen kann um das Bild anzuzeigen, z.B. <img src="ZeigeBild.aspx?id=1234">.
Die Seite ZeigeBild.aspx macht nichts weiter als anstelle einer HTML-Seite ein Bild in den HTTP-Stream zu schreiben.
Der Code, der dafür nötig ist, sieht wie folgt aus.
protected void Page_Load(object sender, EventArgs e)
{
int bildId;
// Aktuellen Response löschen
Response.Clear();
// Prüfen ob eine bildid übergeben wurde
if (!int.TryParse(Request.QueryString["bildid"], out bildId))
{
// Fehler, keine Bildid übergeben
Response.End();
return;
}
else
{
// Mittels TableAdapter exakt ein Bild laden.
DatenschichtTableAdapters.BilderTableAdapter adapter = new DatenschichtTableAdapters.BilderTableAdapter();
Datenschicht.BilderDataTable bilder = adapter.GetDataByBild(bildId);
if (bilder.Rows.Count != 1)
{
Response.End();
return;
}
else
{
Response.ContentType = bilder[0].BildContentType;
Response.BinaryWrite(bilder[0].BildDaten);
Response.End();
}
}
7: Alle Bilder auf einer Seite anzeigen
Möchte man nun alle Bilder aus der Datenbank auf einer Webseite anzeigen, benötigt man als erstes eine Datenquelle für diese Bilder.
Dazu fügt man auf der Webseite ein „ObjectDataSource“-Control hinzu. Dieses ObjectDataSource-Control kann mit Hilfe eines kleinen Assistenten konfiguriert werden.
Im ersten Schritt des Assistenten ist die Datenkomponente zu wählen, die die Daten liefert. Dies ist die Datenschicht, die als DataSet zuvor bereits definiert wurde.
Im zweiten Schritt wird die Methode zum Füllen der Daten ausgefüllt. Anschließend kann der Assistent beendet werden.
Um die von der ObjectDataSource bereitgestellten Informationen auch wirklich darstellen zu können, fügt man nun ein DataList-Control in die Webseite ein und bindet diese DataList über den Assistenten (kleiner Pfeil rechts am Control) an die ObjectDataSource. Dadurch werden alle Daten aus der Datenbank in einer Liste dargestellt.
Mit einer Ausnahme: leider weiß die Liste noch nicht genau wie sie Bilder darzustellen hat. Dazu kann man über den Assistenten des DataList-Controls die Darstellung anpassen: Vorlage bearbeiten .
Innerhalb der Vorlage kann man die darzustellenden Elemente, wie z.B. BildName, BildGroesse, frei positionieren und verändern.
Um das eigentliche Bild darzustellen, fügt man am einfachsten ein Image-Control aus der Toolbox ein und konfiguriert dieses über seinen Assistenten (kleiner Pfeil rechts oben am Control). Die bindbaren Eigenschaften des Image-Controls müssen wie folgt gesetzt werden:
ImageUrl für Bindung selektieren und Gebunden an: auf BildId setzen. Die Format-Eigenschaft muss auf „ZeigeBild.aspx?bildid={0}“ eingestellt werden.
Anschließend kann man die Vorlagenbearbeitung über den Assistenten beenden und die Anwendung starten.
