Maison > Article > interface Web > Exemple détaillé d'implémentation simple de la fonction d'aperçu de l'affichage de l'image de téléchargement jQuery

Exemple détaillé d'implémentation simple de la fonction d'aperçu de l'affichage de l'image de téléchargement jQuery

小云云original: 2017-12-30 14:33:032390parcourir

Cet article vous apprend principalement comment implémenter simplement la fonction de prévisualisation de l'affichage des images de téléchargement de jQuery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

<!DOCTYPE html>
<html>
<head>
  <title>HTML5上传图片预览</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script>
  <style>
    .hide
    {
      display:none;
    }
  </style>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
  <input type="file" name="file0" id="file0" multiple="multiple" />
  <br><br><img src="" id="img0" width="120" class="hide">
</form>
<script>
  $("#file0").change(function(){
    var objUrl = getObjectURL(this.files[0]) ;
    console.log("objUrl = "+objUrl) ;
    if (objUrl) 
    {
      $("#img0").attr("src", objUrl);
      $("#img0").removeClass("hide");
    }
  }) ;
  //建立一個可存取到該file的url
  function getObjectURL(file) 
  {
    var url = null ;
    if (window.createObjectURL!=undefined) 
    { // basic
      url = window.createObjectURL(file) ;
    }
    else if (window.URL!=undefined) 
    {
      // mozilla(firefox)
      url = window.URL.createObjectURL(file) ;
    } 
    else if (window.webkitURL!=undefined) {
      // webkit or chrome
      url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
  }
</script>
</body>
</html>

Recommandations associées :

Explication détaillée de React, ajax et java pour implémenter les fonctions de téléchargement d'images et de prévisualisation

Méthode d'implémentation de la fonction de téléchargement d'image et d'aperçu Ajax

jQuery implémente la fonction d'aperçu du fichier image avant le téléchargement

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：Explication détaillée de l'instruction Vue personnalisée v-selectable similaire à jQuery UI SelectableArticle suivant：Explication détaillée de l'instruction Vue personnalisée v-selectable similaire à jQuery UI Selectable

Articles Liés

Voir plus