Implémentation de plusieurs téléchargements de fichiers basés sur les compétences javascript html5

Implémentation de plusieurs téléchargements de fichiers basés sur les compétences javascript html5_javascript

WBOY

Libérer： 2016-05-16 15:12:18

original

1866 Les gens l'ont consulté

L'exemple de cet article vous explique comment implémenter plusieurs téléchargements de fichiers à l'aide de javascript html5. Le contenu spécifique est le suivant

Structure HTML :

<div class="container">
  <label>请选择一个图像文件：</label>
  <input type="file" id="file_input" multiple/>
</div>

Copier après la connexion

Au fait, parlons de la logique principale de cet upload :

Utilisez la balise input et sélectionnez type=file N'oubliez pas d'en apporter plusieurs, sinon vous ne pouvez sélectionner qu'une seule image
Lier l'heure de changement de l'entrée,
Le point clé est de savoir comment gérer cet événement de changement. Utilisez la nouvelle interface FileReader de H5 pour lire le fichier et l'encoder en base64. La prochaine chose est d'interagir avec les camarades de classe back-end<. 🎜>

Code JS :

window.onload = function(){
    var input = document.getElementById("file_input");
    var result,div;
 
    if(typeof FileReader==='undefined'){
      result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
      input.setAttribute('disabled','disabled');
    }else{
      input.addEventListener('change',readFile,false);
    }<br>　　　　　//handler
    function readFile(){
      for(var i=0;i<this.files.length;i++){
        if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式
          return alert("上传的图片格式不正确，请重新选择")<br>　　　　　　　　　　}
        var reader = new FileReader();
        reader.readAsDataURL(this.files[i]);
        reader.onload = function(e){
          result = '<div id="result"><img src="'+this.result+'" alt=""/></div>';
          div = document.createElement('div');
          div.innerHTML = result;
          document.getElementById('body').appendChild(div); 　　//插入dom树           <br>　　　　　　　　　　}
      }
    }
  }

Copier après la connexion

Est-il possible de télécharger plusieurs photos comme ça ?

Cependant, ce n'est pas le cas. Cela convertit simplement l'image en codage base64, puis l'affiche sur le front-end. Lors de l'actualisation, il n'y a rien

Après avoir inséré l'image, ouvrez les outils de développement et voyez que la structure html est comme ceci

L'approche réaliste est que nous envoyons les fichiers de la file d'attente au backend dans la fonction de traitement. Les étudiants du backend renvoient le fichier crypté MD5 et le chemin correspondant au fichier au front-end, et le front-end emprunte ce chemin. et le rend à la page supérieure.

Ensuite, le fichier MD5 est renvoyé au backend, car le frontend supprime généralement les images après le téléchargement. Le but du retour est de dire au backend de confirmer que ces images correspondent à ce que nous voulons, et le backend les stocke dans. la base de données.

Dites-moi comment interagir avec jquery

function readFile(){
      var fd = new FormData();
      for(var i=0;i<this.files.length;i++){
        var reader = new FileReader();
        reader.readAsDataURL(this.files[i]);
        fd.append(i,this.files[i]);<br>　　　　　　　　　 }
        $.ajax({
          url : '',
          type : 'post',
          data : fd,
          success : function(data){
            console.log(data)
         　} 
        })
}

Copier après la connexion

FormData est également une nouvelle interface de H5, utilisée pour simuler la soumission de contrôles de formulaire. Le plus gros avantage est qu'il peut soumettre des fichiers binaires

Ensuite, après avoir récupéré les données souhaitées dans le rappel de réussite, nous pouvons insérer l'image dans la page, similaire à la méthode précédente~

Dernier rendu :

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.