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

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

    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事件