JavaScript implémente le téléchargement et la prévisualisation des images sans actualisation

Cet article présente principalement en détail la fonction de téléchargement d'images d'aperçu sans actualisation à l'aide de JavaScript. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Comment implémenter la fonction de téléchargement sans actualisation ? Le téléchargement manuscrit sans actualisation nécessite 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

Créez d'abord un conteneur pour le formulaire et l'image

  <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 envoyer des requêtes à l'aide de XMLHttpRequest. Cela rend l'envoi de données de formulaire plus flexible et plus pratique car il peut être utilisé indépendamment du formulaire. Si vous définissez le type d'encodage du formulaire 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 est utilisé pour obtenir toutes les données d'entrée dans le formulaire, puis utiliser 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!