2016-11-14 4 views
0

in JavaScript lesen i durch Bindung des on-Änderungsmethode in die Datei Eingabe und Speichern der Dateidaten in einen anderen Eingang mit dem folgenden Codewie Bilddatei als Daten url mit PHP

$("#release_cover_custom").on('change', function (evt) { 
       var files = evt.target.files; // FileList object 

       // Loop through the FileList and render image files as thumbnails. 
       for (var i = 0, f; f = files[i]; i++) { 

        // Only process image files. 
        if (!f.type.match('image.*')) { 
         continue; 
        } 

        var reader = new FileReader(); 

        // Closure to capture the file information. 
        reader.onload = (function (theFile) { 
         return function (e) {        
$("#release_cover_custom_data").val(e.target.result); 
         }; 
        })(f); 

        // Read in the image file as a data URL. 
        reader.readAsDataURL(f); 
       } 


      }); 

die Dateidaten lesen Warum verwende ich den oben genannten Code ?, um die Bilddaten zu speichern, weil ich ein Formular habe, wo ich Einstellungen für die E-Mail-Vorlage, die später gesendet werden würde, und dort muss ich das Hintergrundbild in der E-Mail verwendet werden, die ich brauche um eine Vorschau der E-Mail mit allen Einstellungen und dem zum Hochladen bereitgestellten Hintergrundbild anzuzeigen, bevor das Formular gespeichert oder hochgeladen wird, also lese ich die Bilddaten, speichere sie in einer Eingabe und öffne dann ein modales Fenster, um eine Vorschau der E-Mails anzuzeigen und alles zu posten die notwendige varia bles dort einschließlich der Bilddaten, die dann in der folgenden Art und Weise innerhalb der CSS verwendet, um den Hintergrund-Bild wie unten in meinem PHP-View-Datei

background-image:url('" . $background_image . "') !important;

Jetzt will ich anwenden tun erreichen die das Gleiche über php, bedeutet, wenn ich das Bild in einem Pfad gespeichert habe und ich möchte die Bilddaten lesen und auf die gleiche Weise verwenden, die ich mit JavaScript verwendet habe, um es an die css-Eigenschaft weiterzugeben,

Ich habe versucht, base64_encode(file_get_contents('path/to/file'))

zu verwenden

aber die Codierung scheint für die Bilddaten anders zu sein, als der Hintergrund im Alter wird nicht angezeigt, sollte ich eine andere Methode verwenden, um es in PHP zu erreichen.

+0

Es scheint, dass Sie das ausgewählte Bild anzeigen möchten, bevor der Benutzer es hochladen .. bin ich richtig? können Sie eine Geige für das gleiche erstellen? –

+0

nein ich habe das Bild bereits vor dem Hochladen angezeigt, nachdem ich das Bild gespeichert habe möchte ich die Bilddaten auf die gleiche Weise wie ich in Javascript lesen und es im Hintergrund laden, ich weiß, es wäre verwirrend, wenn ich bereits die image dann warum benutze ich nicht die url stattdessen, ich muss mehr checks in den vorhandenen code für die vorschau und ich dachte, wenn ich könnte den gleichen prozess über php dann alles, was ich tun müssen ist, um die bilddaten übergeben und es wird geladen sein. hoffe, ich konnte das Problem erklären –

+1

Die Daten-URL muss wie folgt aussehen: [] [; base64], '. Sie können nicht einfach die Base64-codierten Daten als Hintergrundbild-URL verwenden. – Quagaar

Antwort

1

@quagaar Antwort hat mir geholfen, das Problem zu lösen und ersetzt die folgenden

$background_image=base64_encode(file_get_content('/path/to/file')); 

mit

$background_image='data:image/png;base64,'.base64_encode(file_get_content('/path/to/file')); 

und alles funktioniert wie erwartet gut.

EDIT:

zwischen i nur mit Bildern zu tun war, und wenn Sie mit Bildern arbeiten nur, und Sie müssen MIME-Typen (zB für Kopf-, oder wie mein Fall ist), dann ist dies ein schnelles und zuverlässiges Technik:

$file = 'path/to/image.jpg'; 
$image_mime = image_type_to_mime_type(exif_imagetype($file)); 

Es wird True Image Mime Typ ausgeben, auch wenn Sie Ihre Bilddatei umbenennen.