So ändern Sie den Beschriftungsstil der Eingabedatei in js

Beim Hochladen von Dateien müssen Sie normalerweise das Eingabedatei-Tag verwenden. Aufgrund des hässlichen Aussehens des Standardformularelements bin ich jedoch auch auf dieses Problem gestoßen, als ich es heute hochlud , und die umgebenden Die anderen Formularelemente sind völlig fehl am Platz. Deshalb wollte ich mehr darüber erfahren und fand eine relativ einfache Methode. Tatsächlich ist es sehr einfach, die Beschriftung an die Eingabebeschriftung zu binden, die Eingabebeschriftung auszublenden und den Stil für die Beschriftung oder die Beschriftung innerhalb der Beschriftung festzulegen:

<form action="" method="" enctype=&#39;multipart/form-data&#39;>
   <label for=&#39;my_file&#39; class=&#39;inputlabelBox&#39;>
           <p class="inputBox">点击上传文件</p>
    </label>
    <input type="file" name="myfile" id=&#39;my_file&#39; style="display:none;" />
</form>
<img src="" id="img" width="300" />

Nachher Hochladen der Bildvorschau über Js:

var inputlabelBox = document.querySelector('.inputlabelBox');
var my_file = document.querySelector('#my_file');
var img = document.querySelector('#img'); 
my_file.onchange = function()
{       
         var file = this.files[0];
         var reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = function()
         {
                img.src = this.result;
         }
}

Verwandte Empfehlungen:

js Eingabedatei löschen, Dateiinhaltscode hochladen

Eingabedatei Beispielcode für die Bildvorschaufunktion hochladen

Einfache Implementierung der Eingabedatei zum Abrufen des Dateistammverzeichnisses_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Beschriftungsstil der Eingabedatei in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!