Comment créer un composant d'aperçu de téléchargement d'image dans H5-js tutoriel-php.cn

Comment créer un composant d'aperçu de téléchargement d'image dans H5

php中世界最好的语言

Libérer： 2018-03-10 16:19:42

original

2099 Les gens l'ont consulté

Cette fois, je vais vous montrer comment créer un composant de prévisualisation de téléchargement d'image dans H5. Quelles sont les précautions pour créer un composant de prévisualisation de téléchargement d'image dans H5. Voici un cas pratique, jetons un coup d'œil. .

Mon environnement de développement est Windows 10 et les navigateurs de test sont Chrome et Firefox
Si vous rencontrez des navigateurs incompatibles, vous pouvez essayer de mettre à niveau le navigateur ou de le rechercher sur Google (~￣▽￣)~

1 .Sélection unique et sélection multiple de fichiers

Par défaut, est une sélection unique. L'ajout de l'attribut multiple permet une sélection multiple de fichiers

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <label>单选:<input type="file"/></label>
        <label>多选:<input type="file" multiple="multiple"/></label>
    </body></html>

Copier après la connexion

2. Obtenez l'objet fichier

Ouvrez la console du navigateur et sélectionnez le fichier pour voir les modifications de la console

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body> 
        <label>可以这样:<input type="file" multiple="multiple" onchange="getFilesInfo(this.files)"/></label>
        <script>
            function getFilesInfo(f){                console.log(f);
            }        </script>
        <label>也可以这样:<input id="files" type="file" multiple="multiple" /></label>
        <script>
            function getFilesInfo2(evt) {                var files = evt.target.files; 
                console.log(files);
            }            document.getElementById(&#39;files&#39;).addEventListener(&#39;change&#39;, getFilesInfo2, false);        </script>
        <label>还可以这样:<input id="fileInput" type="file" multiple="multiple" onchange="getFilesInfo3()"/></label>
        <script>
            function getFilesInfo3(){                var files=document.getElementById("fileInput").files;                console.log(files);
            }        </script>
    </body></html>

Copier après la connexion

3. Attributs communs

Dans la seconde. Étape que nous avons déjà vue, j'ai vu le fichier dans la console. Développez-le et jetons un coup d'œil aux attributs communs

Description des attributs communs :
nom-nom du fichier
taille-taille<🎜. >type-file type
lastModified-Date de la dernière modification

Allez, essayons d'afficher quelques informations sur la page

<!doctype html><html>
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <input type="file" id="files"  multiple />
        <output id="list"></output>
        <script>
            function handleFileSelect(evt) {                var files = evt.target.files; //如果你是单选那就直接evt.target.files[0]
                var output = []; 
                for(var i = 0, f; f = files[i]; i++) {
                    output.push(&#39;<li><strong>&#39;, f.name, &#39;</strong> (&#39;, f.type || &#39;n/a&#39;, &#39;) - &#39;,
                        f.size, &#39; bytes, last modified: &#39;,
                        f.lastModifiedDate.toLocaleDateString(), &#39;</li>&#39;);
                }                document.getElementById(&#39;list&#39;).innerHTML = &#39;<ul>&#39; + output.join(&#39;&#39;) + &#39;</ul>&#39;;
            } 
            document.getElementById(&#39;files&#39;).addEventListener(&#39;change&#39;, handleFileSelect, false);        </script>
    </body> </html>

Copier après la connexion

Limiter la taille et le format du fichier<🎜. >

a dit Pour télécharger et prévisualiser des images, vous devez filtrer la taille et le format des fichiers téléchargés

En supposant que nous autorisons uniquement le téléchargement de jpg et png et que la taille du fichier est inférieure à 2 Mo, c'est très simple et vous pouvez jugez uniquement les informations sur les fichiers

Si vous ne connaissez pas les types de fichiers que vous souhaitez filtrer, vous pouvez vérifier les types de fichiers dans la console, puis copier et coller
Bien sûr, vous pouvez également définir accept="image. /*" dans la balise d'entrée pour autoriser uniquement la saisie de fichiers image

5. Exemple d'aperçu

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h3>过滤出图片</h3>
        <input type="file" id="files"   multiple accept="image/*"  />
        <output id="list"></output> 
        <script>
            function handleFileSelect(evt) {                var files = evt.target.files;                var output = [];                for(var i = 0, f; f = files[i]; i++) {                    if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){//<===这里
                        output.push(&#39;<li><strong>&#39;, f.name, &#39;</strong> (&#39;, f.type || &#39;n/a&#39;, &#39;) - &#39;,
                        f.size, &#39; bytes, last modified: &#39;,
                        f.lastModifiedDate.toLocaleDateString(), &#39;</li>&#39;);
                    }
                }                document.getElementById(&#39;list&#39;).innerHTML = &#39;<ul>&#39; + output.join(&#39;&#39;) + &#39;</ul>&#39;;
            } 
            document.getElementById(&#39;files&#39;).addEventListener(&#39;change&#39;, handleFileSelect, false);        </script>
    </body> </html>

Copier après la connexion

L'aperçu est implémenté en créant dynamiquement des balises img et en liant ObjectURL à l'attribut src de la balise img

Exemple

6. Aperçu du téléchargement d'une seule image

<!DOCTYPE html><html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <h3>预览</h3>
       <input type="file" id="files"  multiple accept="image/*" />
       <output id="list"></output>  
       <script>
           function handleFileSelect(evt) {               var files = evt.target.files;               var output = [];               for(var i = 0, f; f = files[i]; i++) {                   if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){
                       output.push("![]("+URL.createObjectURL(f)+")"); 
                   }
               }               document.getElementById(&#39;list&#39;).innerHTML = &#39;<ul>&#39; + output.join(&#39;&#39;) + &#39;</ul>&#39;;
           }           document.getElementById(&#39;files&#39;).addEventListener(&#39;change&#39;, handleFileSelect, false);       </script>
   </body></html>

Copier après la connexion

Exemple

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h3>简单预览示例</h3>
        <label id="fileBox" style="border: 1px #ccc solid;display:block;width: 100px;height:100px;background-clip:border-box;background-origin:padding-box;background-size:cover">
            <input type="file"  hidden="hidden" style="display: none;" onchange="fileSelect(this.files)"/>
         </label>
        <script>
            function fileSelect(f) { 
                if(!f){                    return;
                }  
                f=f[0];                if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){                    document.getElementById(&#39;fileBox&#39;).style.backgroundImage="url(" + URL.createObjectURL(f)+ ")";
                } 
                
            }　        </script>
    </body> </html>

Copier après la connexion

Lecture connexe :

Comment utiliser s-xlsx pour importer et exporter des fichiers Excel

Comment utiliser JavaScript pour enregistrer les données texte

Extension de téléchargement de fichiers à l'aide de jQuery

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!