改变上传文件表单默认样式

一.上传文件表单默认样式

    1.代码

<div style="margin-top:50px; text-align:center">
			<form id="uploadForm" action="" method="post"  enctype="multipart/form-data">
				<input id="file" name="file" type="file"/>
				<a href="javascript:;" id="doUpload" class="easyui-linkbutton" οnclick="doUploadFile()" style="width:80px">上传</a>
			</form>			
		</div>

    注：上面代码a标签样式是easyUI里的样式

    2.效果

    

二.改变后

    1.代码

<div style="margin-top:50px; text-align:center">
			<form id="uploadForm" action="" method="post"  enctype="multipart/form-data">
				<input id="showPath" name="path" class="easyui-textbox" readonly="true" style="width:250px"/>
				<a href="javascript:;" class="easyui-linkbutton" style="position:relative;">浏览...
				<input id="file" name="file" type="file" style="opacity:0; filter:alpha(opacity=0); position:absolute; top:2px; right:0px" />
				</a>
				<a href="javascript:;" id="doUpload" class="easyui-linkbutton" οnclick="doUploadFile()" style="width:80px">上传</a>
			</form>			
		</div>

    2.效果

    

三.改变样式原理

    将上传表单放进a标签内

    然后相对定位

    最后让上传表单变为全透明

    展示路径放进一个只读表单内

四.后续

    1.上传表单发生change事件后，将上传表单value赋值给只读表单，展示路径

    2.只读表单内不会显示真实路径，而是显示“C:\\fakepath\\+文件名”

    解决办法：js中将“C:\\fakepath\\”替换为空字符串

    3.上传表单发生change事件后，需要重新绑定change事件