So erstellen Sie eine Bild-Upload-Vorschaukomponente in H5-js-Tutorial-php.cn

So erstellen Sie eine Bild-Upload-Vorschaukomponente in H5

php中世界最好的语言

Freigeben： 2018-03-10 16:19:42

Original

2036 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie eine Bild-Upload-Vorschaukomponente in H5 erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer Bild-Upload-Vorschaukomponente in H5? .

Meine Entwicklungsumgebung ist Windows 10 und die Testbrowser sind Chrome und Firefox
Wenn Sie auf inkompatible Browser stoßen, können Sie versuchen, den Browser zu aktualisieren oder ihn zu googeln (~￣▽￣)~

1.Einzelauswahl und Mehrfachauswahl von Dateien

Standardmäßig ist eine Einzelauswahl von Dateien.

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

Nach dem Login kopieren

2. Holen Sie sich das Dateiobjekt

Öffnen Sie die Browserkonsole und wählen Sie die Datei aus, um die Konsolenänderungen anzuzeigen

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

Nach dem Login kopieren

Im zweiten Schritt haben wir die Datei bereits in der Konsole angezeigt und werfen einen Blick auf die allgemeinen Attribute:

Name-Dateiname

Größe-Größe

Typ-Dateityp

lastModified-Datum der letzten Änderung

Komm schon, lass uns versuchen, ein paar Informationen auf der Seite auszugeben

4. Dateigröße und Dateiformat begrenzen

sagte: Um eine Vorschau des hochgeladenen Bildes anzuzeigen, müssen Sie die Größe und das Format der hochgeladenen Datei filtern

Angenommen, wir erlauben nur das Hochladen von JPG und PNG und die Dateigröße liegt innerhalb von 2 MB. Das ist sehr einfach und Sie können Beurteilen Sie nur die Dateiinformationen.

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

Nach dem Login kopieren

Wenn Sie die Dateitypen, die Sie filtern möchten, nicht kennen, können Sie die Dateitypen in der Konsole überprüfen und dann kopieren und einfügen.

Natürlich können Sie auch Accept="image" festlegen /*" im Eingabe-Tag, um nur die Eingabe von Bilddateien zu ermöglichen

5. Vorschaubeispiel

Die Vorschau wird durch dynamisches Erstellen des img-Tags und Binden der ObjectURL an die Quelle implementiert Attribut des img-Tags

Beispiel

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

Nach dem Login kopieren

6. Einzelbild-Upload-Vorschau

Beispiel

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

Nach dem Login kopieren

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie das gelesen haben Fall in diesem Artikel Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

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

Nach dem Login kopieren

So verwenden Sie s-xlsx zum Importieren und Exportieren von Excel-Dateien

So verwenden Sie JavaScript dazu Textdaten speichern

Datei-Upload-Erweiterung mit jQuery

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Bild-Upload-Vorschaukomponente in H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!