Résumer l'introduction de l'implémentation JS de l'aperçu de l'image

Cet article présente principalement deux façons d'implémenter l'aperçu image avec JS. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

Compte tenu de l'expérience utilisateur, le page Web Avant de télécharger l'image dans la base de données , la prévisualiser est une étape nécessaire. Premièrement, cela peut apporter un sentiment de sécurité à l'utilisateur. Deuxièmement, cela peut empêcher la soumission des fichiers image à la base de données. aux problèmes et à l’occupation des ressources de stockage.

Ensuite, il existe deux façons d'implémenter l'aperçu : l'une consiste à utiliser la méthode window.URL.createObjectURl pour générer un chemin d'objet blob pour les données d'image sélectionnées (qui peut à peine être compris comme la valeur de l'entrée); la seconde consiste à La première consiste à obtenir le lecteur FileReader.

Quelle que soit la méthode, vous devez d'abord obtenir les données du fichier. L'obtention des données du fichier est obtenue à partir de la collection de fichiers.

Méthode 1 :

Le code est le suivant :

<input type=file id="inp">
<script>
 inp.onchange=function(){
 var file=this.files[0] // 获取input上传的图片数据;
 var img=new Image() ;
 url=window.URL.createObjectURL(file) // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src;
 img.src=url;
 //其实也可一句代码搞定，不需要声明那么多变量；img.scr=window.URL.cteateObejectURL(this.files[0]) ;
 然后把img添加到页面就实现预览了
 }
<script>

Méthode 2 :

Utilisez l'objet FileRader pour lire le fichier Il peut être divisé en quatre étapes : 1. Créez un FileReader ; object; 2. Appelez la méthode readAsDataURL pour lire le fichier; 3. Appelez l'événement onload pour surveiller. Nous avons besoin d'obtenir les données complètes, mais nous ne savons pas quand le fichier a été lu ? , la troisième étape de surveillance est donc nécessaire ; 4. Obtenez le résultat de la lecture via l'attribut result de l'objet FileRader r.

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!