How to modify the input file label style in js

In the process of uploading files, it is usually necessary to use the input file tag, but due to the ugly appearance of its default form element, I also encountered this problem when I was uploading it today. It was really too ugly, and the surrounding The other form elements are completely out of place. So I wanted to learn more about it, and found a relatively simple method. In fact, it is very simple. It is to bind the label label to the input label, hide the input label, and set the style for the label label or the label inside the label:

<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" />

After uploading the image preview through 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;
         }
}

Related recommendations:

js clear input file upload content code

input file upload image preview function example code

Simple implementation of input file to obtain the file root directory_PHP tutorial

The above is the detailed content of How to modify the input file label style in js. For more information, please follow other related articles on the PHP Chinese website!