css 多文件上传框美化

最新推荐文章于 2025-05-17 10:48:13 发布

学而思之

最新推荐文章于 2025-05-17 10:48:13 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端 javaScript html css 文章标签： css html 源码 JQuery

本文链接：https://blog.youkuaiyun.com/chiping123/article/details/53433285

javaScript 同时被 3 个专栏收录

4 篇文章

订阅专栏

html

3 篇文章

订阅专栏

css

3 篇文章

订阅专栏

博客介绍了如何使用CSS和HTML美化默认的文件上传框。通过创建一个文本框和按钮，将原始上传框设置为透明并定位在按钮下方，实现上传框的视觉美化。在用户点击‘浏览’按钮时，更新文本框显示所选文件的名称。

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

	html自带的文件上传框略有简陋，一般在开发中会有一些美化的处理。
先说一下思路：
	1、一个text框（选中的文件名称）和button按钮（浏览功能）
	2、html自带的文件上传框
	3、隐藏html文件上传框（设置为透明）至浏览按钮位置
直接上源码：
html文件内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title> multiple file upload test</title> 
 </head>
 <link href="../css/fileUpload.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resouse/jquery.js"></script>
  <script type="text/javascript" src="../js/fileUpload.js"></script>
 <body>
	 <input id="filePath" type="text" readonly="readonly"/>
	 <input type="button" value="浏  览">
	 <input class="fileChose" name="commFile" type="file" multiple="multiple" onchange="getTextPath(this)"/>
 </body>
</html>

css样式（fileUpload.css）：

.fileChose{
	position: relative;
	left: -60px;
	opacity: 0;
}

js文件（fileUpload.js）：

思路：浏览按钮点击时即文件上传按钮点击改变时，获取选取的所有文件名称，并赋值给text框

function getTextPath(obj) {
	var files = obj.files;
	var name = "";
	for ( var i = 0; i < files.length; i++) {
		name += obj.files[i].name;
		if (i < files.length - 1) {
			name += ',';
		}
	}
	$("#filePath").val(name);

效果图展示：