Exemple détaillé d'implémentation simple de la fonction d'aperçu de l'affichage de l'image de téléchargement jQuery-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-30 14:33:03

original

2393 Les gens l'ont consulté

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>

Copier après la connexion

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!