一个棘手的web控件问题

Question

可以做一個 <input type="button" value="Browse" /> 的按鈕，這樣就會顯示 Browse另外再將 <input type="file" /> 的那一個設定成透明、覆蓋在按鈕上面 (透過 z-index)
這樣就可以達到你的目的了

Answer 1

把file设得很短，然后用透明把file完全透明，并漂浮，这样就可以显示背景上的文字。
这样就可以写什么文字都可以了，而且还能点击file透明CSS：filter:Alpha(Opacity=50);Opacity:0.5;

Answer 2

<input type="text" name="file1" value="" id="file1">
        <input type="file" name="photo" id="photo" style="display:none" onchange='document.getElementById("file1").value=this.value'>
        <input type="button" value="Browse" onclick='document.getElementById("photo").click();'>
LZ试试这个

Answer 3

<input type="text" name="file1" value="" id="file1">
        <input type="file" name="photo" id="photo" style="display:none" onchange='document.getElementById("file1").value=this.value'>
        <input type="button" value="Browse" onclick='document.getElementById("photo").click();'>
LZ试试这个

Answer 4

参考这篇文章，里面就是用透明的file控件来实现http://topic.csdn.net/u/20081021/00/43e8b35a-43f9-4a97-b15c-890fac209827.html

Answer 5

六楼的朋友，用了你的方法，在IE下可以显示为“Browse”，但是我再点击upload后，就没反应了。
而且此代码，在firefox下，点击“Browse”没有反应。代码如下：
<tr><td>Browse to locate the firmware file</td></tr>
<tr><td><input type="text" name="file1" value="" id="file1">
       <input type="file" name="photo" id="photo" style="display:none"onchange='document.getElementById("file1").value=this.value'>
        <input type="button" value="Browse" onclick='document.getElementById("photo").click();'>
</td></tr>
<tr><td align=center><input class=button type=submit name=upload VALUE="Upload"></td></tr>

Answer 6

把代码嵌套在form中 action=发送地址 method=发送方法
<form name="fform" action="about:blank" method="post" >
<tr> <td>Browse to locate the firmware file </td> </tr> 
<tr> <td> <input type="text" name="file1" value="" id="file1"> 
      <input type="file" name="photo" id="photo" style="display:none"onchange='document.getElementById("file1").value=this.value'> 
        <input type="button" value="Browse" onclick='document.getElementById("photo").click();'> 
</td> </tr> 
<tr> <td align=center> <input class=button type=submit name=upload VALUE="Upload"> </td> </tr>
</form>

Answer 7

透明file控件来覆盖模拟的，不过在ff3下因为安全的问题路径显示不全<style type="text/css">
#MyFile
{
position:absolute;
width:200px;
filter:alpha(opacity=0);
opacity:0;
z-index:100;
outline:none;/*ff*/
hide-focus:expression(this.hideFocus=true);/*ie*/
}
</style>
<input type="text" style="width:130px;" id="txtPath"/><input type="button" value="Browse" />
<br />
<input type="file" id="MyFile" onchange="setPath(this.value)"/>
<script type="text/javascript">
function setPath(v){
  document.getElementById('txtPath').value=v;
}
function getPos(o){
  var p=new Object();
  p.x=o.offsetLeft;
  p.y=o.offsetTop;
  while(o=o.offsetParent){
    p.x+=o.offsetLeft;
    p.y+=o.offsetTop;
  }
  return p;
}
window.onload=function(){
  var f=document.getElementById('MyFile');
  var p=getPos(document.getElementById('txtPath'));  f.style.left=p.x+"px";
  f.style.top=p.y+"px";
}
</script>

Answer 8

楼上的大哥啊，还是不行哦，点击Browse选择文件后，再点击upload，文件无法上传到httpd。

Answer 9

把整个form 贴出来
还有你获取的路径是不是对的啊 

Answer 10

可以啊，你没用对吧？？
<form method="post" enctype="multipart/form-data" action="File.aspx"><!--要注意设置表单的提交方法和enctype-->
<style type="text/css">
#MyFile
{
    position:absolute;
    width:200px;
    filter:alpha(opacity=0);
    opacity:0;
    z-index:100;
    outline:none;/*ff*/
    hide-focus:expression(this.hideFocus=true);/*ie*/
    }
</style>
<input type="text" style="width:130px;" id="txtPath"/><input type="button" value="Browse" />
<br />
<!--要加上name并且放到表单内--->
<input type="file" id="MyFile" name="myfile" onchange="setPath(this.value)"/><br/>
<input type="submit" value="上传"/>
<script type="text/javascript">
function setPath(v){
  document.getElementById('txtPath').value=v;
}
function getPos(o){
  var p=new Object();
  p.x=o.offsetLeft;
  p.y=o.offsetTop;
  while(o=o.offsetParent){
    p.x+=o.offsetLeft;
    p.y+=o.offsetTop;
  }
  return p;
}
window.onload=function(){
  var f=document.getElementById('MyFile');
  var p=getPos(document.getElementById('txtPath'));  f.style.left=p.x+"px";
  f.style.top=p.y+"px";
}
</script>
</form>
File.aspx
<%@ Page Language="c#" Debug="true" %>
<script runat="server">
public void Page_Load(object sender,EventArgs e)
{    
    string _msg = "上传成功！";//返回信息
    HttpPostedFile file =Request.Files["myfile"];
    file.SaveAs(MapPath("file/" + DateTime.Now.ToString().Replace(" ","").Replace("-","").Replace(":","")+System.IO.Path.GetExtension(file.FileName)));
        
    Response.Write( _msg );
}
</script>

Answer 11

谢谢楼上的大哥，问题已解决。主要是上次没有加上 name="myfile", 但是这个name我好像没有操作过它，不知道为什么。再次感谢楼上的大哥。