PHP zeigt das ausgewählte Bild vor dem Hochladen an
Ich verwende die Upload-Bibliothek von Codeigniter, um Bilder für Benutzeravatare hochzuladen. Ich verwende auch Jcrop , mit dem Benutzer einen Bereich zum Zuschneiden auswählen können.
Ich speichere alle Koordinaten des ausgewählten Bereichs in Texteingaben, die ich in PHP zum Zuschneiden verwenden werde.
Ist es möglich, das ausgewählte Bild vor dem Hochladen anzuzeigen?
Formular hochladen:
%Vor%Wenn möglich, versuche ich, schwere js zu vermeiden oder 2 mal hochzuladen. Bei der Auswahl einer Datei stelle ich fest, dass sie den Namen zeigt:
Gibt es eine Möglichkeit, diese Funktionalität auch zum Abrufen des Bildpfads zu verwenden (Pfad zum Bild im Computer des Uploaders)? Theoretisch kann ich das in Bild-Tags verwenden und das Bild ohne js anzeigen.
3 Antworten
Um es klar zu sagen: Sie laden die Datei nicht zweimal in Ihre aktuelle Lösung hoch, richtig? Sie sollten nur einmal hochladen, es an einem temporären Speicherort speichern, es auf der Erstellungsseite anzeigen und dann die Crop-Parameter bei der zweiten Aktion zurücksenden.
Bisher gab es keine Möglichkeit, auf den Inhalt einer Datei oder den Wert des Datei-Upload-Formulars zuzugreifen. Es wäre ein Sicherheitsrisiko, wenn eine Webseite die Struktur Ihres Dateisystems kennen würde. (Sind Sie unter Windows, in einem Admin-Account, ...?) Vor Ewigkeiten konnten Sie das tun, aber wir sind weise.
Die in HTML5 eingeführte Datei-API ermöglicht den Zugriff auf Dateien, ohne diese Informationen preiszugeben, und es gibt einige coole Optionen, die für Ihre clientseitige Anwendung verfügbar sind. Die wichtigsten sind die files -Eigenschaft einer Dateieingabe und URL.createObjectURL .
Wenn Sie ein Formular ändern, wird eine interne Repräsentation der Datei (en) in der Eingabe mit fileInput.files verfügbar gemacht, was ein FileList -Objekt ist. Es gibt APIs, in denen Sie die Bytes lesen können, die Sie aber als Quelle für ein Bild festlegen möchten.
Da es sich bei einer Datei nicht um eine URL handelt, erstellt URL.createObjectURL eine virtuelle URL um die Datei herum, die nur von Ihrer Seite und iframes mit demselben Ursprung verwendet werden kann. Setze das Bild auf dieses, dann onload, widerruft die URL und starte dein jQuery cropping plugin:
Probieren Sie dieses jsFiddle zumindest in Chrome und Firefox aus. Dies ist offensichtlich keine Lösung für alle Browser, aber es ist eine großartige Möglichkeit, sie für Browser zu verbessern, die dies unterstützen.
Sie könnten es möglicherweise mit css (http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html) tun, aber es wird unglaublich schwer zu integrieren sein jcrop ...
Ich würde empfehlen, den Benutzer einfach warten zu lassen, bis er hochgeladen wurde. Das ist es, was Facebook und die meisten anderen Websites, die das Zuschneiden ermöglichen, tun.
In jedem Fall würde es den Upload-Prozess nicht beschleunigen, also gibt es nicht so viel Grund dafür.
Sie können nicht den vollständigen Dateipfad abrufen. Es wäre ein Sicherheitsproblem: Ссылка
Tags und Links jquery php file-upload codeigniter