css 多文件上传框美化

来源：互联网发布：android程序员水平高低编辑：程序博客网时间：2024/05/29 08:02

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);

效果图展示：

0 0