⼀种简单美观的javaweb⽂件上传页⾯设计思路
众所周知，前端上传⽂件，需要⽤form表单和input的type=‘file’，等等属性设置。
这导致了前端页⾯不美观，并且会随着浏览器的不同产⽣不同的效果。
本⽂假定读者已会web上传
针对以上描述问题，提出下⾯的解决⽅案：
css样式⾃⾏设置，不提供
思路如下：
写⼀个普通的input元素和⼆个button元素（选择和导⼊）
写⼀套form上传，设置为隐藏，并为input上传框设置id为file
为input设置readonly属性(禁⽌⽤户输⼊内容)，设置placeholder属性（input提⽰信息），设置onclick点击函数checkFile函数（⾃定义的）在函数中触发id为file 的窗选择⽂件$('#file').click();，同样为选择button设置该触发函数。
为form中的input设置onchange事件，当选择了⽂件的时候会触发该函数，这⾥起名为getFileName（它的作⽤是回显，将form中input的内容显⽰到我们设置为显⽰的input的内容var name = $('#file').val(); $('#filename').val(name);）
为导⼊按钮设置⼀个点击事件subForm，在这个地⽅我们要做俩件事，⼀个是⽂件名的筛选，保证上传的⽂件类型，另⼀个就是触发上传功能，此处贴代码
input标签placeholder属性
function subForm() {
var filepath = ElementById("file").value;
var re = /(\\+)/g;
var filename = place(re, "#");
//对路径字符串进⾏剪切截取
var one = filename.split("#");
//获取数组中最后⼀个，即⽂件名
var two = one[one.length - 1];
//再对⽂件名进⾏截取，以取得后缀名
var three = two.split(".");
//获取截取的最后⼀个字符串，即为后缀名
var last = three[three.length - 1];
//添加需要判断的后缀名类型
var tp = "xls,xlsx";
//返回符合条件的后缀名在字符串中的位置
var rs = tp.indexOf(last);
if (rs != -1) {
//⽂件上传函数----------------------------------
toImport();
} else {
layer.alert("⽂件不是有效xls或者xlsx⽂件.请重新上传！", 0);
return false;
}
}
function toImport() {
//with的使⽤⾃⾏百度
with (document.forms[0]) {
var filepathStr = ElementById("file").value;
if (filepathStr == "") {
layer.alert("请选择要导⼊的Excel！",0);
} else {
//后台路径
action = "batchInfoAction.do";
submit();
//设置等待弹窗防⽌重复提交
layer.msg("批量导⼊需要较长时间，请耐⼼等待！",{icon:0,time:21600000,shade:[0.5,'#000',true]});
}
}
}
总结
说⽩了就是把form隐藏掉，然后使⽤我们可控的input和按钮等组件来控制不可控的⽂件上传样式