Fonction d'image d'aperçu JavaScript pour obtenir un téléchargement sans actualisation

Cet article présente l'utilisation de JavaScript pour implémenter une fonction simple de téléchargement d'images d'aperçu sans actualisation.

Cet article utilise deux éléments, FormData et FileReader.

FileReader est utilisé pour la navigation dans les images.

FormData est utilisé pour les requêtes ajax.

code HTML

Vous devez d'abord créer des conteneurs pour les formulaires et les images.

  <form enctype="multipart/form-data" id="oForm">
    <input type="file" name="file" id="file" onchange="readAsDataURL()" />
    <input type="button" value="提交" onclick="doUpload()" />
  </form>
  <p>
    <img alt="" id="img"/>
  </p>

code javascript

FormData :

L'objet FormData peut être utilisé pour assembler un ensemble de paires clé/valeur pour l'envoi de requêtes à l'aide de XMLHttpRequest. Si le type d'encodage du formulaire est défini sur multipart/form-data, le format de données transmis via FormData est le même que le format de données transmis par le formulaire via la méthode submit().

Ici, l'objet FormData obtient toutes les données d'entrée du formulaire, puis utilise une requête ajax pour envoyer les données à l'URL spécifiée, afin qu'il n'y ait pas de saut lorsque le formulaire est soumis.

  function doUpload() { 
     var formData = new FormData($( "#oForm" )[0]); 
     console.log(formData); 
     $.ajax({ 
       url: 'pp', 
       type: 'POST', 
       data: formData, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function (returndata) { 
         console.log(returndata); 
       }, 
       error: function (returndata) { 
         console.log(returndata); 
       } 
     }); 
  }

FileReader :

L'objet FileReader permet aux applications Web de lire de manière asynchrone Le contenu d'un fichier (ou d'un tampon de données brutes) stocké sur l'ordinateur de l'utilisateur. Utilisez un objet File ou Blob pour spécifier le fichier ou les données à lire.

Ici, l'objet FileReader est utilisé pour obtenir l'image à partir du fichier et convertir l'image en formulaire d'URL de données à afficher dans le conteneur pré-créé.

function readAsDataURL(){
  //检验是否为图像文件
    var file = document.getElementById("file").files[0];
    if(!/image\/\w+/.test(file.type)){
      alert("看清楚，这个需要图片！");

      return false;
    }else{
    var reader = new FileReader();
    //将文件以Data URL形式读入页面
    reader.readAsDataURL(file);
    reader.onload=function(e){
      var result=document.getElementById("img");
      //显示文件
      result.src= this.result ;
    }
  }
}

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!