js修改input file标签样式的方法

小云云
Freigeben: 2023-03-22 10:22:01
Original
2632 人浏览过

在进行文件上传得过程中,通常需要用到input file 标签,但是由于其默认的表单元素丑陋的外观,今天我在做上传的时候,也遇到了这个问题,真心太丑,和周围的其他表单元素,完全是格格不入啊。于是就想深入学习了解下,然后找到了一个比较简单的方法。其实很简单,就是通过label标签与input标签绑定,隐藏input标签,给label标签或者label里面的标签的设置样式:

Nach dem Login kopieren

在通过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;
         }
}
Nach dem Login kopieren

相关推荐:

js清空input file上传文件的内容代码

input file上传 图片预览功能实例代码

input file获得文件根目录简单实现_PHP教程

以上是js修改input file标签样式的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!