问题:
HTML自带的file上传按钮因在各种浏览器里显示样式不一、不易自定义样式给我们带来很大的麻烦。
解决思路:
将input[type=file]控件隐藏,使用一个input[type=text]和button组合作为file控件的替代(样式自行定义),并将隐藏的file控件和作为替代的text和button控件做事件同步关联,这样我们在操作text和button的时候,同时触发file控件,表单提交时,file控件提交。
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</head>
<body>
<form name="frm" id="frm" action="/remote_service/upload2/parseRuleFilePath.htm" method="post" enctype="multipart/form-data">
<input type="text" name="fileShowName" id="fileShowName" readonly="readonly" />
<!-- 按钮的on