Téléchargement d'images Ajax basé sur Firefox-js tutoriel-php.cn

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

亚连

Libérer： 2018-05-25 11:29:02

original

1764 Les gens l'ont consulté

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(&#39;my-file&#39;, new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg"}));
fd.append(&#39;my-file&#39;, new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg;base64"}));

Copier après la connexion

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(&#39;my-file&#39;, new Blob([new Base64().decode(&#39;/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ...&#39;)],{type:"image/jpeg"}));

Copier après la connexion

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(&#39;my-file&#39;,document.querySelector(Selector).files[0])

Copier après la connexion

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.