Implémentation HTML5 de la prévisualisation des images locales

Cet article présente principalement les informations pertinentes sur l'implémentation HTML5 de la prévisualisation des images locales. Les amis qui en ont besoin peuvent se référer à la

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

Copiez le code

Le code est le suivant :

<input id="upload_image" type="file" name="image" accept="image/*" />

Notez que ceci accept="image /*" est très important, il est précisé que l'image téléchargée est une image. Lors de l'utilisation du terminal mobile, elle sera liée au type de sélection de fenêtre contextuelle du système et à d'autres problèmes. Elle doit être ajoutée.
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) { 
// 根据这个 <input> 获取文件的 HTML5 js 对象 
var files = event.target.files, file; 
if (files && files.length > 0) { 
// 获取目前上传的文件 
file = files[0]; 
// 来在控制台看看到底这个对象是什么 
console.log(file); 
// 那么我们可以做一下诸如文件大小校验的动作 
if(file.size > 1024 * 1024 * 2) { 
alert(&#39;图片大小不能超过 2MB!&#39;); 
return false; 
} 
// !!!!!! 
// 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL 
// 获取 window 的 URL 工具 
var URL = window.URL || window.webkitURL; 
// 通过 file 生成目标 url 
var imgURL = URL.createObjectURL(file); 
// 用这个 URL 产生一个 <img> 将其显示出来 
$(&#39;body&#39;).append($(&#39;<img/>&#39;).attr(&#39;src&#39;, imgURL)); 
// 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了 
// URL.revokeObjectURL(imgURL); 
} 
}); 
});

Brève description
En termes simples, l'ensemble de l'opération est conçu comme suit :
1. Déclenchez l'événement via l'événement de changement de 28897b20adb25fbae118a3f80f538dec .Obtenir le fichier téléchargé via l'objet événement Le fichier objet js du fichier;
3. Générer une URL utilisable à partir de l'objet fichier via l'outil window.URL; >5.* Libérer le serveur de cette URL

Points clés :

1 Pour un même fichier, à chaque appel de URL.createObjectURL, une URL différente sera régénérée . 2. Lorsque URL.createObjectURL est appelé, parcourez Le serveur ouvre automatiquement de l'espace dans la mémoire pour servir cette URL, ce qui signifie que cette URL peut être demandée avec succès 3 Si URL.revokeObjectURL(imgURL); le serveur sera éteint et la requête sera refaite. L'URL sera 404 ; tout cela concerne le client, le serveur n'en sait rien, y compris l'image que vous avez sélectionnée ; 5. L'imgURL ressemble probablement à ceci : blob:http% 3A//localhost%3A8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb


Recommandations associées :


Utilisez HTML5 Canvas pour créer un jeu de masturbation simple

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!