HTML/CSS-使用图像作为输入类型=文件_Html_Css_Image_Upload_Styling

HTML/CSS-使用图像作为输入类型=文件

html css image

HTML/CSS-使用图像作为输入类型=文件,html,css,image,upload,styling,Html,Css,Image,Upload,Styling,如何使用此图像：而不是常规的： <input type="file" /> 看一看。我不太确定您是想设置文件上载字段的样式，还是只想在样式中使用png文件不过，这是你想提到的如果您想使用PNG文件在页面内的样式中使用，您应该了解如何使用图像设置背景，尽管这可能不适用于所有HTML元素。我做了类似的事情，效果非常好 <script type="text/javascript"> var t = 0; var IE = navigator.appName; var

如何使用此图像：

而不是常规的：

<input type="file" />

看一看。

我不太确定您是想设置文件上载字段的样式，还是只想在样式中使用png文件

不过，这是你想提到的

如果您想使用PNG文件在页面内的样式中使用，您应该了解如何使用图像设置背景，尽管这可能不适用于所有HTML元素。

我做了类似的事情，效果非常好

<script type="text/javascript">

var t = 0;
var IE = navigator.appName;
var OP = navigator.userAgent.indexOf('Opera');
var tmp = '';

function operaFix() {

   if (OP != -1) {
      document.getElementById('browser').style.left = -120 + 'px';
   }

}


function startBrowse() {

   tmp = document.getElementById('dummy_path').value;
   getFile();

}

function getFile() {

   // IF Netscape or Opera is used...
   //////////////////////////////////////////////////////////////////////////////////////////////
   if (OP != -1) {

   displayPath();

      if (tmp != document.getElementById('dummy_path').value && document.getElementById('dummy_path').value 

!= '') {

         clearTimeout(0);
         return;

      }

   setTimeout("getFile()", 20);

   // If IE is used...
   //////////////////////////////////////////////////////////////////////////////////////////////
   } else if (IE == "Microsoft Internet Explorer") {

      if (t == 3) {

         displayPath();

         clearTimeout(0);
         t = 0;
         return;

      }

   t++;
   setTimeout("getFile()", 20);


   // Or if some other, better browser is used... like Firefox for example :)
   //////////////////////////////////////////////////////////////////////////////////////////////
   } else {

      displayPath();

   }

}


function displayPath() {

   document.getElementById('dummy_path').value = document.getElementById('browser').value;

}

</script>



<style type="text/css">

#browser
   {
   position: absolute;
   left: -132px;
   opacity: 0;
   filter: alpha(opacity=0);
   }

#browser_box
   {
   width: 104px;
   height: 22px;
   position: relative;
   overflow: hidden;
   background: url(button1_off.jpg) no-repeat;
   }

#browser_box:active
   {
   background: url(button1_on.jpg) no-repeat;
   }

#dummy_path
   {
   width: 350px;
   font-family: verdana;
   font-size: 10px;
   font-style: italic;
   color: #3a3c48;
   border: 1px solid #3a3c48;
   padding-left: 2px;
   background: #dcdce0;
   }

</style>

<body onload="operaFix()">


   <div id="browser_box">
   <input type="file" name="my_file" id="browser" onclick="startBrowse()" />
   </div>

</body>