修改UpFileload的样式

最新推荐文章于 2021-05-13 16:57:52 发布

pipp

最新推荐文章于 2021-05-13 16:57:52 发布

阅读量1.9k

点赞数

文章标签： class javascript file filter function server

本文链接：https://blog.csdn.net/pipp/article/details/2569836

版权

思路：使用div建立两层 ，UpFileload或是Input(File)在上一层，开alpha滤镜为透明。

下一层为输入框与按钮组合模仿UpFileload样式，UpFileload的propertychange事件给输入框赋值。

需要修改UpFileload只需要求改下一层的输入框和按钮的样式即可

<style title="text/css" type="text/css">
  DIV.fileinputs { POSITION: relative }
  DIV.fakefile { Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px }
  INPUT.file { Z-INDEX: 2; FILTER: alpha(opacity: 0); POSITION: relative; TEXT-ALIGN: right; moz-opacity: 0; opacity: 0 }
  </style>
  <script language="JavaScript" type="text/javascript">
    function HandleFileButtonClick()
    {
        document.Form1.txtFakeText.value = document.Form1.myFile.value;
    }
  </script>


<div class="fileinputs">
    <input type="file" id="myFile" class="file" runat="server" NAME="myFile" onpropertychange="HandleFileButtonClick();"/>
    <div class="fakefile">
    <input type="text" name="txtFakeText"/>
    <img src="search.gif"/>
    </div>
   </div> （text）+Button

<style title="text/css" type="text/css">

		DIV.fileinputs { POSITION: relative }

		DIV.fakefile { Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px }

		INPUT.file { Z-INDEX: 2; FILTER: alpha(opacity: 0); POSITION: relative; TEXT-ALIGN: right; moz-opacity: 0; opacity: 0 }

		</style>

		<script language="JavaScript" type="text/javascript">

    function HandleFileButtonClick()

    {

        document.Form1.txtFakeText.value = document.Form1.myFile.value;

    }

		</script>





<div class="fileinputs">

				<input type="file" id="myFile" class="file" runat="server" NAME="myFile" onpropertychange="HandleFileButtonClick();"/>

				<div class="fakefile">

				<input type="text" name="txtFakeText"/>

				<img src="search.gif"/>

				</div>

			</div>