Deux façons d'implémenter l'aperçu de l'image en javascript

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. quatre étapes : 1. Créez un objet FileReader ; 2. Appelez la méthode readAsDataURL pour lire le fichier ; 3. Appelez l'événement onload pour écouter. Nous devons obtenir les données complètes, mais nous ne le 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 :

<input type=file id="inp">
<input type=file id="inp">
<script>
inp.onchange=function(){
 var read=new FileReader() // 创建FileReader对像;
 read.readAsDataURL(this.files[0]) // 调用readAsDataURL方法读取文件;
  read.onload=function(){
   url=read.result // 拿到读取结果;
   var img=new Image();
   img.src=url;
   p.appendChild(img);
 }
 }

Ce qui précède est l'aperçu de l'image d'implémentation JS introduit par le éditeur Plusieurs méthodes, j'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message et l'éditeur vous répondra à temps. Je tiens également à vous remercier tous pour votre soutien au site Script House !

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!