Téléchargement d'images Ajax basé sur Firefox

Cet article présente principalement l'implémentation du téléchargement d'images ajax basé sur Firefox. Tout le monde sait qu'utiliser ajax sous FF est très difficile. Aujourd'hui, je vais vous présenter une solution parfaite à ce problème.

Il existe de nombreux protocoles pour télécharger des fichiers image. Cette fois, nous parlons principalement du formulaire "Content-Type: multipart/form-data;".

Au travail, certains fichiers statiques du frontend sont référencés via le système de modèles FTL, et la page frontend est référencée via SSI. Pendant le développement du projet, un grand nombre de fichiers SHTML statiques doivent être générés à l'origine. Je pensais que cela devrait être une chose backend, mais depuis que j'ai rejoint cette entreprise, cette chose rapide a été transmise au front-end ~~ J'étais sans voix, je n'avais pas d'autre choix que de suivre mes habitudes, mais je suis une personne paresseuse, alors Je viens de réfléchir à la possibilité de le soumettre via ajax

D'après ma lecture habituelle de MDN, c'est aujourd'hui principalement l'objet FormData qui résout le protocole de téléchargement de plusieurs fichiers.

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

Tout semble parfait, mais dans la méthode File, uniquement au niveau chrome pour courir. Il n'y a aucun moyen de télécharger des images. Généralement, les fichiers ordinaires peuvent être implémentés via des objets Blob

Voici quelques méthodes pour y parvenir, un processus d'exploration

1 Après une longue recherche. , la méthode de conversion d'URL en objet Fichier, ont toutes échoué. . .

2.Direction du fichier HTML5

a Commençons par l'exemple du fichier HTML5

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

Dans l'exemple, lors de l'impression de oFREvent.target.result, il vient de trouver "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."

Il s'est avéré être des données codées en base64

Quand j'ai vu les données codées ci-dessus, je me suis demandé si les objets Blob les prenaient en charge. Le code est le suivant

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. encodé, et le décoder via la méthode est N'est-ce pas possible ?

J'ai trouvé un exemple d'encodage et de décodage base64 sur Internet, et je l'ai essayé

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

Après avoir capturé le paquet , j'ai trouvé que le transfert de fichier normal est différent des données ajax, il a donc dû échouer

3 Pour des raisons de sécurité au niveau de la page du navigateur, il semble que vous deviez sélectionner manuellement le fichier vous-même.

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

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

En fait, j'ai été induit en erreur par l'API File au niveau au début. J'ai toujours pensé que c'était au niveau de la page

Tout à coup, j'ai découvert que le haut de la dernière adresse était comme ça. . Il semble que je n’ai toujours pas pris les choses au sérieux et que j’ai fait quelques détours.

Postscript, en ajoutant des fonctions comme le plug-in Oil Monkey et en prenant en charge la méthode File au niveau Chrome, nous pouvons facilement télécharger des photos.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Méthode de mise en œuvre de l'effet de couche contextuelle de chargement d'Ajax

Analyse d'exemple de données de formulaire de soumission AJAX

Méthode de soumission de formulaire Ajax inter-domaines (même nom de domaine de base)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!