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.

Le code est le suivant :

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!