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" οnchange="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); 效果图展示：
