Javascript 输入文件类型的用户界面_Javascript_Css_Cross Browser

Javascript 输入文件类型的用户界面

javascript css

Javascript 输入文件类型的用户界面,javascript,css,cross-browser,Javascript,Css,Cross Browser,嗨我正在使用 <input type="file"> 它在IE、Firefox、Chrome和Safari上有不同的用户界面我想要的东西，可以在所有4个浏览器上生成相同的用户界面这可能吗？作为安全预防措施，许多浏览器（至少是最新版本的Firefox）不再允许您键入文件名。只能以图形方式选择文件。我相信Chrome也是这样你在说什么样的用户界面？如果您是指选择文件的另一种方式。。。我不认为还有其他方法（也是安全预防措施）。 Uniform将允许您轻松地对输入元素进行蒙皮以

嗨

我正在使用

<input type="file">

它在IE、Firefox、Chrome和Safari上有不同的用户界面我想要的东西，可以在所有4个浏览器上生成相同的用户界面

这可能吗？

作为安全预防措施，许多浏览器（至少是最新版本的Firefox）不再允许您键入文件名。只能以图形方式选择文件。我相信Chrome也是这样

你在说什么样的用户界面？如果您是指选择文件的另一种方式。。。我不认为还有其他方法（也是安全预防措施）。

Uniform将允许您轻松地对输入元素进行蒙皮以便上载。

这为我完成了工作：）


新的第1页
div.fileinputs{
位置：相对位置；
}
img.fakefile，input.fakefile{
位置：绝对位置；
顶部：0px；
左：0px；
z指数：1；
}
input.file{
位置：相对位置；
文本对齐：右对齐；
-moz不透明度：0；
过滤器：alpha（不透明度：0）；
不透明度：0；
z指数：2；
}
函数HandleFileButtonClick（）
{    
document.getElementById（“xyz”）.value=document.getElementById（“abc”）.value；
}

我的意思是输入标签和按钮应该显示在所有浏览器上。。可以使用javascript或其他任何东西完成吗？不可能直接更改外观，唯一的方法是使用复杂的客户端脚本-jQuery正在为您完成所有工作，请参见Erik answer..@Shadow-不能使用css/javascript完成吗？我不能使用jqueryjQuery是JavaScript。CSS也可以，但更复杂。这个看起来不错，我想我以前也用过：实际上jquery完全改变了用户界面，我不想这样。。。我以前也看过这个链接。但是那边的输入框不会显示所选文件的名称（最好是完整的文件路径）..@Eric-它必须使用css或javascript和普通html。我不能使用jquery和其他东西。。。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
div.fileinputs {
    position: relative;
}

img.fakefile, input.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}</style>

<script type="text/javascript">
function HandleFileButtonClick() 
  {    
    document.getElementById("xyz").value =document.getElementById("abc").value; 
    }  


</script>
</head>

<body>
<div class="fileinputs">
    <input type="file" id="abc" class="file"  onchange="HandleFileButtonClick();" />
        <input type="text" id="xyz" class="fakefile" />
        <img src="browse button.bmp" class="fakefile" style="position: absolute; left: 150; top: 0" width="61" height="22"/>
</div>
</body>
</html>