recherche

Maison >interface Web >js tutoriel >Comment créer un composant d'aperçu de téléchargement d'image dans H5

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

php中世界最好的语言
php中世界最好的语言original
2018-03-10 16:19:422112parcourir

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, 714779e36f6b8fe3da1575391740131b 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>
.

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>

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-tailletype-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>
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>

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>

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js/css charge dynamiquement les plug-ins JSArticle suivant：js/css charge dynamiquement les plug-ins JS

Articles Liés

Voir plus