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

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

小云云original: 2018-01-02 16:00:294134parcourir

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"/>

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>

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>

* 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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de fonctions de liaison secondaire provinciales et municipales mises en œuvre par AngularJSArticle suivant：Exemple de fonctions de liaison secondaire provinciales et municipales mises en œuvre par AngularJS

Articles Liés

Voir plus