Implémentation HTML5 de la prévisualisation des images locales _Compétences du didacticiel HTML5

Description du problème
Supposons que nous ayons un contrôle de téléchargement d'image en HTML :

Copier le code

Le code est comme suit :

Notez que accept="image/*" est très important. Il précise que l'image à télécharger sera liée au type de sélection de fenêtre contextuelle du système et à d'autres problèmes sur le terminal mobile. Assurez-vous de l'ajouter.

Ensuite, la question est : existe-t-il un moyen de lire le contenu de l'image avant de soumettre le formulaire au serveur ? Cela semble simple, ce sont tous des fichiers clients, donc cela devrait être possible, mais il n'y avait vraiment pas de bon moyen avant, mais depuis l'avènement du HTML5, cette fonction est revenue, et cette fonction peut être facilement réalisée via FileReader .

Des exemples illustrent le problème

Copier le code

Le code est le suivant :

$(function () {

$('#upload_image').change(function(event) {

// Obtenez l'objet HTML5 js du fichier basé sur ce
fichiers var = event.target.files, file;
if (files && files.length > 0) {
// Récupère les fichiers actuellement téléchargés
file = files[0]; voir ce que c'est dans la console Quel est l'objet ?
console.log(file);
// Ensuite, nous pouvons effectuer des actions telles que la vérification de la taille du fichier
if(file.size > 1024 * 1024 * 2) {
alert('La taille de l'image ne peut pas dépasser 2 Mo !');
return false
}
//
// Ce qui suit est la clé ; , générez un via cet objet de fichier URL d'image disponible
// Outil d'obtention d'URL de fenêtre
var URL = window.URL || window.webkitURL
// Générez l'URL cible via le fichier
var imgURL = URL.createObjectURL(file );
// Utilisez cette URL pour générer un et l'afficher
$('body').append($('').attr ('src', imgURL));
// Utilisez la phrase suivante pour libérer le serveur pour cette URL en mémoire Après l'exécution, l'URL sera invalide
// URL.revokeObjectURL(imgURL); 🎜>}
});
});



Brève description

En bref, la conception complète de l'opération est la suivante :

1. Déclenchez l'événement via l'événement de changement de >2. Obtenez le fichier objet js du fichier téléchargé via l'objet événement ;

3. Générez une URL utilisable à partir de l'objet fichier via l'outil window.URL ;
4. >5.* Release Les points clés du serveur de cette URL
 :
1. Pour un même fichier, à chaque appel de URL.createObjectURL, une URL différente sera régénérée
. 2. Appelez l'URL Lorsque .createObjectURL, le navigateur ouvre automatiquement de l'espace dans la mémoire pour servir l'URL, ce qui signifie que l'URL peut être demandée avec succès
3. Si URL.revokeObjectURL(imgURL); le serveur l'éteindra et un 404 apparaîtra lors de la nouvelle demande de cette URL
4. Tout cela concerne le client, et le serveur n'en sait rien, y compris l'image que vous avez sélectionnée
5. L'imgURL est probablement celle-ci. Ressemble à : blob:http://localhost:8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb