一种简单美观的java web文件上传页面设计思路

众所周知，前端上传文件，需要用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，在这个地方我们要做俩件事，一个是文件名的筛选，保证上传的文件类型，另一个就是触发上传功能，此处贴代码

	function subForm() {
		var filepath = document.getElementById("file").value;
		var re = /(\\+)/g;
		var filename = filepath.replace(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);
			document.getElementById("file").value = "";
			return false;
		}
	}

	function toImport() {
	//with的使用自行百度
		with (document.forms[0]) {
			var filepathStr = document.getElementById("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和按钮等组件来控制不可控的文件上传样式