Explication détaillée du type d'entrée = fichier pour sélectionner des images et obtenir des effets de prévisualisation-js tutoriel-php.cn

Explication détaillée du type d'entrée = fichier pour sélectionner des images et obtenir des effets de prévisualisation

小云云

Libérer： 2018-01-02 16:00:29

original

4133 Les gens l'ont consulté

Cet article vous apporte principalement un exemple de sélection d'images avec input type=file et d'obtention d'effets de prévisualisation. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Grâce à la balise , spécifiez le type de fichier, qui peut permettre le téléchargement de fichiers.

accepter : vous pouvez choisir le type de téléchargement, tel que : télécharger simplement des images, et il n'y a aucune restriction Le format d'image est image/*;

multiple : spécifie si plusieurs fichiers peuvent être sélectionnés

spécifie que seules les images peuvent être téléchargées et que plusieurs fichiers peuvent être sélectionnés

<input type="file" accept="image/*" multiple="multiple"/>

Copier après la connexion

Bien sûr, une entrée directe type=file ne peut sélectionner que les fichiers/ressources téléchargés. Si nous devons obtenir l'effet d'aperçu sur la page actuelle après avoir sélectionné l'image, nous pouvons y parvenir comme suit<.>

Code HTML

fichier de style CSS

<body>
  <p id="box">
    <img id="imgshow" src="" alt=""/>
  </p>
  <p id="pox">
    <input id="filed" type="file" accept="image/*"/>
  </p>
</body>

Copier après la connexion

Code JS

<style>
    #box{
      width: 300px;
      height: 300px;
      border: 2px solid #858585;
    }
    #imgshow{
      width: 100%;
      height: 100%;
    }
    #pox{
      width: 70px;
      height: 24px;
      overflow: hidden;
    }
  </style>

Copier après la connexion

* jQuery est utilisé dans le code js ci-dessus, donc Le fichier jQuery

<script>
    //在input file内容改变的时候触发事件
    $('#filed').change(function(){
    //获取input file的files文件数组;
    //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
    //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
      var file = $('#filed').get(0).files[0];
    //创建用来读取此文件的对象
      var reader = new FileReader();
    //使用该对象读取file文件
      reader.readAsDataURL(file);
    //读取文件成功后执行的方法函数
      reader.onload=function(e){
    //读取成功后返回的一个参数e，整个的一个进度事件
        console.log(e);
    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
    //的base64编码格式的地址
        $('#imgshow').get(0).src = e.target.result;
      }
    })
</script>

Copier après la connexion

Recommandations associées :

Tutoriel d'exemple de contrôle de fichiers pour sélectionner des images

Exemple de code HTML5 Plus pour mettre en œuvre la fonction de prise de photos ou de sélection de photos dans l'album à télécharger sur l'application mobile

Après avoir saisi l'image sélectionnée, elle ne sera pas téléchargée et affichée à temps

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Explication détaillée du type d'entrée = fichier pour sélectionner des images et obtenir des effets de prévisualisation