input type=file浏览修改,不清空file值,提交表单
网上看了很多方法,说改这个封装好的组件value的,绝大部分是坑爹,
最常见的是,用写两个input 方法
错误的方法
<form name=formen>
<input type="file" name="picpath" id="picpath" style="display:none" onChange="document.formen.path.value=this.value">
<input name="path" readonly>
<input type="button" value="Browse" οnclick="document.formen.picpath.click()">
</form>
这种方法虽然可以实现效果上的改动,但是你如果要提交表单,你会发现当你提交时 input id=picpath 已经被清空了,所以你更本提交不了。
当然还有别的方法,也大多是坑爹的。
实际上解决这个问题,只需要覆盖将一个input type=text,input type=button放在下面,而input type=file放在上面并且做成透明的就可以做到了,
最后你发现,这样也达不到效果,因为,你没没有调整好位置,,没有把input file 缩短,并且完全覆盖在button上。。
下面是实现代码。很简单,把input file放在 text 与button之间,让后调整style就OK了。
正确的方法
<form action="upgrade_htmls.cgi?next_url=reboot.htm" method="post" enctype="multipart/form-data" >
<td>
<input id="f_file" type='text'>
<input id="t_file" type="file" name="t_file" style="filter:alpha (opacity=0);position:absolute;opacity:0;width:66px;height:23px"οnchange="f_file.value=this.value" hidefocus>
<!--这里opacity:0是完全透明,你可调整为10试试,你可以看到 “浏览”遮盖了Browse-->
<input id="btn_value2" value="Browse" type="button" style="width:65px;">
<!--该这个button的名字就不解释了,直接赋值就行了-->
<button id="set3" οnclick="if($('#t_file').val()==''){alert('路径不能为空');return false;}top.reboot_seconds=45;form.submit();">
<script> document.write("提交");</script>
</button>
</td>
</form>
有些人喜欢贴别人的代码当自己的创意,与人无异。