利用Javascript来修改file类型input标签的样式

最新推荐文章于 2024-08-06 15:05:05 发布

江户香葱饼

最新推荐文章于 2024-08-06 15:05:05 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/lolgenius/article/details/68488259

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript结合的方式，对默认不美观的文件上传框进行样式修改的方法。通过隐藏原始的file输入框，并用自定义按钮替代，同时保持文件选择功能不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

一般情况下，利用file类型的input浏览选择文件，再配合form就可以实现文件的上传功能。实现出的效果如下图：（以csdn写博客上传图片时的浏览框为例）

在实际的开发情况中，为了配合整个网页的风格，也为了让浏览框更美观，需要对file类型的input进行样式修改。但由于input中的“浏览”按钮是由html根据input的type解析出来的，没办法直接使用css对齐进行位置上的修改，这就给开发带来一定的麻烦。为了解决这个问题，我们可以使用javascript配合html来进行处理。

主要思想：

（1）将file类型的input进行隐藏

（2）根据需要放置新的按钮和text型的input

（3）将新放置的按钮与input跟隐藏掉的file型input关联到一起，当点击新设置的按钮时会触发file型input的浏览按钮。并将所选文件名称显示在新设置的text型input上。

实现代码：

（1）HTML设置上传文件的form和input等元素

<form id="upload-form" action="" method="post" enctype="multipart/form-data" name="form"> <div style="float:left;width:100%"> <input id="fname" type="text" tabindex="1" style="float:left;width:80%;height:40px;border:1px solid #34495E"/><!--用于显示上传文件名的input--> <input id="up_file" name="up_file" type="file" style="display:none" required="required" onchange="document.getElementById('fname').value=this.value"/><!--实际起作用的file型input--> <input type="button" name="submit" style="float:left;width:10%;height:40px;border:1px solid #34495E;background-color:#34495E;color:#ffffff" value="浏览" onclick="select_file();"/><!--用于触发file型input浏览按钮的button--> <input type="submit" name="submit" style="float:left;width:10%;height:40px;border:1px solid #34495E;background-color:#34495E;color:#ffffff" value="上传"/> </div> </form>

（2）相关的js

function select_file(){
        document.getElementById("up_file").click();
	var name = document.getElementById("up_file").value;
}

给file型input添加一个onchange事件，当内容发生改变时将其中的值，也就是选择的文件名称传到text型input当中显示出来。给浏览按钮添加onclick事件，当点击新设置的“浏览”按钮时，触发js函数select_file，实际是让file类型的input被点击。从而浏览并选择文件。

（3）效果：