Ajax-Bild-Upload basierend auf Firefox

In diesem Artikel wird hauptsächlich die Implementierung des Ajax-Bild-Uploads auf Basis von Firefox vorgestellt. Jeder weiß, dass die Verwendung von Ajax unter FF sehr schwierig ist. Heute werde ich Ihnen eine perfekte Lösung für dieses Problem vorstellen.

Es gibt viele Protokolle zum Hochladen von Bilddateien. Dieses Mal sprechen wir hauptsächlich über die Form „Content-Type: multipart/form-data;“.

Bei der Arbeit wird auf einige statische Dateien im Frontend über das FTL-Vorlagensystem verwiesen, und auf die Frontend-Seite wird über SSI verwiesen. Während der Projektentwicklung muss ursprünglich eine große Anzahl statischer SHTML-Dateien generiert werden Ich dachte, es sollte eine Backend-Sache sein, aber seit ich dieser Firma beigetreten bin, wurde diese schnelle Sache an das Frontend übergeben ~~ Ich war sprachlos, ich hatte keine andere Wahl, als meinen Gewohnheiten zu folgen, aber ich bin ein fauler Mensch, also Ich habe gerade darüber nachgedacht, ob ich es über Ajax einreichen könnte

Basierend auf meiner üblichen Lesart von MDN ist es heute hauptsächlich das FormData-Objekt, das das Protokoll zum Hochladen mehrerer Dateien löst.

https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData

Alles scheint perfekt zu sein, aber in der File-Methode nur auf Chrome-Ebene laufen. Es gibt keine Möglichkeit, Bilder hochzuladen.

Im Folgenden sind einige Methoden aufgeführt, um dies zu erreichen, ein Erkundungsprozess

1 Ich habe eine Möglichkeit gefunden, die URL in ein Dateiobjekt zu konvertieren. . .

2.HTML5-Dateirichtung

a. Beginnen wir mit dem Beispiel einer HTML5-Datei

https://developer.mozilla.org/en-US/docs/DOM / FileReader

Im Beispiel wurde beim Drucken von oFREvent.target.result gerade „data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ...“ gefunden.

Es drehte sich um Es handelt sich um Base64-codierte Daten

Als ich die codierten Daten oben sah, dachte ich darüber nach, ob das Blob-Objekt dies unterstützt. Der Code lautet wie folgt:

var fd = new FormData();
fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg"}));
fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg;base64"}));

b kodiert. Ist es möglich, es mit dieser Methode zu dekodieren?

Ich habe ein Beispiel für Base64-Kodierung und -Dekodierung im Internet gefunden und es ausprobiert

fd.append('my-file', new Blob([new Base64().decode('/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ...')],{type:"image/jpeg"}));

Habe das Paket erfasst und festgestellt, dass es sich um eine normale Datei handelt Die Übertragung unterscheidet sich von den Ajax-Daten, daher muss sie fehlgeschlagen sein

3. Aus Sicherheitsgründen auf Browserseitenebene scheint es, dass die Auswahl der Dateien manuell erfolgen muss

https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects

fd.append('my-file',document.querySelector(Selector).files[0])

Tatsächlich wurde ich am Anfang von der Datei-API in die Irre geführt, ich dachte immer, sie wäre bei

Plötzlich entdeckte ich, dass diese Methode oben in der letzten Adresse verwendet wurde. . Es scheint, dass ich die Dinge immer noch nicht ernst genommen habe und einige Umwege in Kauf genommen habe.

Postscript: Durch das Hinzufügen von Funktionen wie dem Oil Monkey-Plugin und der Unterstützung der Dateimethode auf Chrome-Ebene können wir problemlos Fotos hochladen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ajax-Implementierungsmethode für den Popup-Layer-Effekt beim Laden externer Seiten

Beispielanalyse für AJAX-Übermittlungsformulardaten

Ajax-Cross-Domain-Formularübermittlungsmethode (gleicher Basisdomänenname)

Das obige ist der detaillierte Inhalt vonAjax-Bild-Upload basierend auf Firefox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!