input type=file浏览修改，不清空file值，提交表单

                                                                                   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>

 

                    有些人喜欢贴别人的代码当自己的创意，与人无异。