输入文件类型的UI

时间:2010-12-08 08:43:47

标签: javascript css cross-browser

HI

我正在使用

<input type="file">

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

这可能吗?

3 个答案:

答案 0 :(得分:2)

http://pixelmatrixdesign.com/uniform/

Uniform将允许您轻松设置输入元素以进行上传。

答案 1 :(得分:0)

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

您在谈论什么样的用户界面?如果你的意思是选择文件的另一种方式......我认为没有其他方法(也是安全预防措施)。

答案 2 :(得分:0)

这为我做了工作:)

<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>