HTML5 implémente plusieurs fonctions de téléchargement d'images_compétences du didacticiel HTML5

J'ai déjà écrit sur le téléchargement d'images, mais il s'agissait d'un seul téléchargement. Récemment, il y avait une exigence commerciale qui nécessitait plusieurs téléchargements, alors je l'ai réécrit

.

Structure HTML :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <div classe="conteneur" >
2.  <étiquette>Veuillez sélectionner un fichier image : étiquette>
3.  <entrée type="fichier" id="file_input" multiple/>
4. div>

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 :

Code JavaScriptCopier le contenu dans le presse-papiers

1. window.onload = function(){   
2.         var input = document.getElementById("file_input");   
3.         var result,div;   
4.     
5.         if(typeof FileReader==='undefined'){   
6.             result.innerHTML = "抱歉，你的浏览器不支持 FileReader";   
7.             input.setAttribute('disabled','disabled');   
8.         }else{   
9.             input.addEventListener('change',readFile,false);   
10.         }
    　　　　　//handler   
11.         function readFile(){   
12.             for(var i=0;i<this.files.length;i++){   
13.                 if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式   
14.                     return alert("上传的图片格式不正确，请重新选择")
    　　　　　　　　　　}   
15.                 var reader = new FileReader();   
16.                 reader.readAsDataURL(this.files[i]);   
17.                 reader.onload = function(e){   
18.                     result = '
    this.result+'" alt=""/>
    '
19. div = document.createElement('div'
);
20. div.innerHTML = résultat
21. document.getElementById('body').appendChild(div); //Insérer un arbre dom
    　　　　　 }
22.                                                           
                                                             
23. }
Est-ce comment télécharger plusieurs photos ? 0.0

Cependant, ce n'est pas le cas. Cela convertit simplement l'image en codage base64, puis l'affiche sur le front-end. Lorsque je l'actualise, 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.

Après cela, 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. les dans la base de données.

Dites-moi comment interagir avec jquery

Code JavaScript

Copier le contenu dans le presse-papiers

1. fonction readFile(){   
2.             var fd = nouveau FormData();   
3.             pour(var i=0;i<ce.files.length;i ){   
4.                 var reader = nouveau FileReader();   
5.                 reader.readAsDataURL(this.files[i]);   
6.                 fd.append(i,this.files[i]);
   　　　　　　　　　 }   
7.                 $.ajax({   
8.                     url : '',   
9.                     type : 'post',   
10.                     données : fd,   
11.                     succès  : fonction(données){   
12.                         console.log(data)   
13.                   　}    
14.                 })   
15. }      

Le succès est une réussite法~

上个效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：

http://www.cnblogs.com/weapon-x/p/5237064.html