<input type="file">更改 页面显示 浏览 为上传 .

来源:互联网 发布:加油卡充值优惠软件 编辑:程序博客网 时间:2024/05/17 05:17
具体解决步骤如下:                1、书写html文件的body部分如下:                <form id="form1" runat="Server" enctype="multipart/form-data">                      <div id="filebox"><input type="file" id="choosefile" /></div>                      <input type="button" ondblclick="chooseFile()" value="双击选择文件" />                      <input type="button" onClick="getFilePath()" value="上传" />               </form>               2、书写html文件的javascript部分如下:               <script language="JavaScript">                      function chooseFile(){                            document.getElementById("choosefile").click();                      }                      function getFilePath(){                           var path = document.getElementById("choosefile").value;                           alert(path);                      }                </script>                3.、书写html文件的css部分如下:                <style type="text/css">                #filebox{                       float:left;                       width:155px;                       overflow:hidden;                }               </style>           


到此制作完毕,最后总结解决思路:将file组建放在div中,设置div宽度略大于file插件的文本框部分,目的在于让div将file插件的按钮部分遮盖起来,然后在div后面制作一个按钮,将按钮上的文字改成需要的文字,再在按钮上写上事件函数,用于触发file组建的click事件,以打开文件选择窗口。这样简单的文件上传效果模拟完毕~~

原创粉丝点击