How to modify the input file label style in js

小云云
Release: 2023-03-22 10:22:01
Original
2754 people have browsed it

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" />
Copy after login

After uploading the image preview through Js:

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!