Explication détaillée d'exemples de H5 effectuant plusieurs téléchargements d'images-Tutoriel H5-php.cn

Explication détaillée d'exemples de H5 effectuant plusieurs téléchargements d'images

Y2J

Libérer： 2017-05-24 11:42:01

original

3992 Les gens l'ont consulté

Cet article présente principalement la mise en œuvre de plusieurs fonctions de téléchargement d'images basées sur HTML5 et la mise en œuvre de plusieurs fonctions de téléchargement d'images sur la base du téléchargement d'une seule image. Les amis intéressés peuvent se référer à

Téléchargement d'images que j'ai écrit. auparavant, 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 :

. XML/HTML CodeCopier le contenu dans le presse-papiers

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

Copier après la connexion

Au fait, la logique principale de ce téléchargement :

·Utilisez la balise d'entrée et sélectionnez type=file N'oubliez pas d'en apporter plusieurs, sinon vous ne pouvez sélectionner qu'une seule image

·Liez l'heure de changement de l'entrée,

·Le point clé est de savoir comment gérer ce changementévénement, utilisez la nouvelle interface FileReaderde H5 pour lire le fichier et l'encoder en base64, puis Le truc c'est d'interagir avec les camarades de classe back-end

Code JS :

JavaScript CodeCopiez le contenu dans le presse-papiers

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

Copier après la connexion

Est-ce comment télécharger plusieurs images ? 0.0

Cependant, ce n'est pas le cas. Cela convertit simplement les images en encodage base64 et. puis l'utilise sur le front-end Affichage, il n'y a rien après rafraîchissement

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

La réalité est que nous traitons. La fonction envoie le fichier dans la file d'attente des fichiers au backend. L'étudiant du backend renvoie le fichier crypté MD5. et le chemin correspondant au fichier vers le front-end, et le front-end prend ce chemin et le rend sur la page.

Transférez ensuite le fichier MD5 vers le back-end, car après le téléchargement, le front-end a généralement pour opération de supprimer les images. Le but du retour est d'informer le. back-end pour confirmer que ces images correspondent à ce que nous voulons, le backend est stocké dans la base de données.

Dites-moi comment interagir avec jquery

Code JavaScriptCopier le contenu dans le presse-papiers

🎜>

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 : &#39;&#39;,   
                    type : &#39;post&#39;,   
                    data : fd,   
                    success : function(data){   
                        console.log(data)   
                  　}    
                })   
}

Copier après la connexion

FormData est également une nouvelle interface de H5, qui est utilisée pour simuler la soumission d'un formulaire contrôle

. Le plus gros avantage est que vous pouvez soumettre des fichiers binaires

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

Le rendu précédent :