pimbolie1979
New member
Hallo Leute,
auf meiner Webseite gibt es die Möglichkeit JPEG-Bilder auf den Server hochzuladen. Dies funktioniert auch schon ganz gut. Nachdem ich das Bild hochgeladen und verkleinert habe, möchte ich das Bild auf der Webseite anzeigen. Hierzu möchte ich nicht das die Seite mit PHP neu geladen wird (das bekomme ich hin), sondern ich möchte mit Hilfe von AJAX das Bild vom Server abholen und darstellen. Das Script möchte ich später dann an anderen Stellen für einen dynamischen Bilder load benutzen.
Allerdings habe ich hier erhebliche Probleme und hoffe auf Hilfe von Euch. Ich habe schon einges ausprobiert jedoch scheint das Bild immer im falschen Format für die Darstellung zu sein.
Dies war mein erster Versuch direkt auf ein Bild zuzugreifen das auf meinem Webserver liegt:
Ein anderer Versuch war mit AJAX und PHP (Dies möchte ich später benutzten):
Hier mein PHP Teil:
Ich hatte es auch mit:
Das was ich programmieren möchte ist folgendes:
1. ich erzeuge eine AJAX Anfrage an meinen Server und übergebe die ID vom Bild
2. das PHP Skript prüft ob das Bild vorhanden ist und öffnet es dann
3. das Bild wird dann nachdem es eingelesen wurde an den User geschickt
4. das Bild wird dann beim User dynamisch in der Webseite integriert
Ich weiß das es sicherlich einige Script im Internet gibt die funktionieren. Jedoch sind die natürlich so mächtig das es sehr schwer ist Diese zu verstehen. Einfache Beispiele sind Mangelware und ich hoffe das Ihr mir hier weiterhelfen könnt
- - - Aktualisiert - - -
Ich glaube ich habe eine Lösung gefunden.
Ich muss doch nicht das Bild mit einer Ajax Anfrage erhalten. Sondern ich kann doch einfach ein leeres Bild auf meiner Seite erstellen und füge den Pfad hinzu. Dann müste doch der Browser das Bild automatisch laden und darstellen.
- - - Aktualisiert - - -
Die Lösung hat auch einen Nachteil:
Diese Lösung hat leider den Nachteil, das der Pfad vom Bild im HTML code steht. Somit sieht jeder den Pfad und kann das Bild herunterladen. Wenn ich das Bild dynamisch lade dann sieht man nur ein base64_encode kodiertes Stream. Hier könnte ich noch ein Wasserzeichen hinzufügen.
Kann ich nicht die FileReader(); Funktion benutzen und einfach den Serverpfad angeben.
Wenn nichts gegen meinen Ansatz spricht dann muss ich nur noch folgendes erledigen:
Jetzt muss ich nur noch mit dem AJAX Post die ID von dem Benutzen an ein PHP Skript schicken und dieser erzeugt mit einen JSON return value. Dort stehen alle Bilder drin und ich erzeuge dann dynamisch so viele Bilder und ändere das SRC Attribute
auf meiner Webseite gibt es die Möglichkeit JPEG-Bilder auf den Server hochzuladen. Dies funktioniert auch schon ganz gut. Nachdem ich das Bild hochgeladen und verkleinert habe, möchte ich das Bild auf der Webseite anzeigen. Hierzu möchte ich nicht das die Seite mit PHP neu geladen wird (das bekomme ich hin), sondern ich möchte mit Hilfe von AJAX das Bild vom Server abholen und darstellen. Das Script möchte ich später dann an anderen Stellen für einen dynamischen Bilder load benutzen.
Allerdings habe ich hier erhebliche Probleme und hoffe auf Hilfe von Euch. Ich habe schon einges ausprobiert jedoch scheint das Bild immer im falschen Format für die Darstellung zu sein.
Dies war mein erster Versuch direkt auf ein Bild zuzugreifen das auf meinem Webserver liegt:
HTML:
$.get("http://www.webseite.de/objekt_fotos/157/BMW-5er-GT-M-Sportpaket.jpg", function (rawImageData)
{
//$(".prevImg").attr("src", "data:image/jpeg;base64," + rawImageData);
var readImage = new FileReader();
// Sofern die Datei komplett in den RAM eingelesen wurde wird eine Funktion ausgeführt.
readImage.onload = function(event)
{
$(".prevImg").attr("src",event.target.result).fadeIn(2000);
}
readImage.readAsDataURL(rawImageData);
//console.log("image raw data");
//console.log(rawImageData);
});Ein anderer Versuch war mit AJAX und PHP (Dies möchte ich später benutzten):
HTML:
$.ajax(
{
url: "/php_scripte/get_image.php",
type: "GET",
//dataType: "image/jpeg",
dataType: "image/jpg",
data: 'ReportID=67',
success: function(loaded_image_stream)
{
//$('#loadingAnimation').fadeOut('slow', function() { $('#reportNodeView').fadeIn('slow'); });
//$('#previewImage').attr('src', 'data:image/jpg;base64,' + bytes);
$(".prevImg").attr("src", loaded_image_stream);
//$('#preview').html(msg);
i = new Image();
i.src = loaded_image_stream;
$(this).append(i);
},
error: function(error, txtStatus)
{
console.log(loaded_image_stream);
console.log(txtStatus);
console.log('error');
}
});Hier mein PHP Teil:
$file = file_get_contents($_SERVER["DOCUMENT_ROOT"]."/fotos/157/testbild.jpg");
echo base64_encode($file);Ich hatte es auch mit:
$image_test = imagecreatefromjpeg($_SERVER["DOCUMENT_ROOT"]."/fotos/157/testbild.jpg");
versucht jedoch alles ohne erfolg.Das was ich programmieren möchte ist folgendes:
1. ich erzeuge eine AJAX Anfrage an meinen Server und übergebe die ID vom Bild
2. das PHP Skript prüft ob das Bild vorhanden ist und öffnet es dann
3. das Bild wird dann nachdem es eingelesen wurde an den User geschickt
4. das Bild wird dann beim User dynamisch in der Webseite integriert
Ich weiß das es sicherlich einige Script im Internet gibt die funktionieren. Jedoch sind die natürlich so mächtig das es sehr schwer ist Diese zu verstehen. Einfache Beispiele sind Mangelware und ich hoffe das Ihr mir hier weiterhelfen könnt
- - - Aktualisiert - - -
Ich glaube ich habe eine Lösung gefunden.
Ich muss doch nicht das Bild mit einer Ajax Anfrage erhalten. Sondern ich kann doch einfach ein leeres Bild auf meiner Seite erstellen und füge den Pfad hinzu. Dann müste doch der Browser das Bild automatisch laden und darstellen.
- - - Aktualisiert - - -
Die Lösung hat auch einen Nachteil:
Diese Lösung hat leider den Nachteil, das der Pfad vom Bild im HTML code steht. Somit sieht jeder den Pfad und kann das Bild herunterladen. Wenn ich das Bild dynamisch lade dann sieht man nur ein base64_encode kodiertes Stream. Hier könnte ich noch ein Wasserzeichen hinzufügen.
Kann ich nicht die FileReader(); Funktion benutzen und einfach den Serverpfad angeben.
Wenn nichts gegen meinen Ansatz spricht dann muss ich nur noch folgendes erledigen:
Jetzt muss ich nur noch mit dem AJAX Post die ID von dem Benutzen an ein PHP Skript schicken und dieser erzeugt mit einen JSON return value. Dort stehen alle Bilder drin und ich erzeuge dann dynamisch so viele Bilder und ändere das SRC Attribute
Zuletzt bearbeitet von einem Moderator:
