如何使点击使file显示，再点就把它隐藏


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<script>
function a(obj){
  var a = document.getElementById("upfile");
  a.style.display = (obj.open?"":"none");
  obj.open=!obj.open;
}
</script>
</head>
<body>
<span onclick="a(this)" style="cursor:hand" open="true">上传图片</span>
<br>
<span onclick="a(this)" style="cursor:hand" open="true">上传文件</span>
<br>
<div><input type="file" id="upfile" style='display: none;'>
</div>
</body>
</html>但是当第一次点击上传图片时显示FILE，然后点击上传文件时会隐藏了FILE，我不想要这样的结果，只能通过点击上传图片来隐藏FILE，这样的效果能做出来吗？

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>无标题文档</title>
    <script>
    function a(obj){
      var a = document.getElementById("upfile");
      if(a.t==obj.id||a.t==""||a.t==null){
        a.style.display = (a.style.display==""?"none":"");
        a.t = (a.style.display==""?obj.id:"");
      }
    }
    </script>
    </head>
    <body>
    <span id="pic" onclick="a(this)" style="cursor:hand">上传图片</span>
    <br>
    <span id="fil" onclick="a(this)" style="cursor:hand">上传文件</span>
    <br>
    <div><input type="file" id="upfile" style='display: none;'>
    </div>
    </body>
    </html>
      

  2.   

    谢谢朋友的支持，你所做的效果应该就是我想要的，当把你写的代码移植到我的代码里就出错了，因为我对于javascript不是很熟，你写的代码有点地方我还看的不太明白，我把我整个的代码发上来，你帮我改改吧，效果就是你上面的。<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>无标题文档</title>
    <script>
    function up_pic()
    {
    id_file = document.getElementById('file');
    id_file.style.display="";
    pic_html = "<input type='file' name='file' id='pic'>只支持jpg和jpeg格式的图";
    document.getElementById('file').innerHTML=pic_html;
    }function up_file()
    {
    id_file = document.getElementById('file');
    id_file.style.display="";
    file_html = "<input type='file' name='file' id='file'>只支持rar格式";
    document.getElementById('file').innerHTML=file_html;
    }</script>
    </head>
    <body>
    <span id="pic" onclick="up_pic()" style="cursor:hand">上传图片</span>
    <br>
    <span id="fil" onclick="up_file()" style="cursor:hand">上传文件</span>
    <br>
    <div id="file" style="display:none"></div>
    </body>
    </html>
      

  3.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>无标题文档</title>
    <script>
    var _html = {
    pic:"<input type='file' name='file' id='pic'>只支持jpg和jpeg格式的图",
    fil:"<input type='file' name='file' id='file'>只支持rar格式"
    }
    var old
    function $(id){return document.getElementById(id)}
    function up(_this){
        var obj=$('file')
    var s=obj.style.display;
    obj.innerHTML=_html[_this.id];
        if( _this==old){
    obj.style.display=s=="none"?"block":"none";
        }
        else{
        obj.style.display="block"
        old=_this
        }
    }
    </script>
    </head>
    <body>
    <span id="pic" onclick="up(this)" style="cursor:hand">上传图片</span>
    <br>
    <span id="fil" onclick="up(this)" style="cursor:hand">上传文件</span>
    <br>
    <div id="file" style="display:none"></div>
    </body>
    </html>
      

  4.   

    id 有些乱，小改：<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>无标题文档</title>
    <script>
    var _html = {
    pic:"只支持jpg和jpeg格式的图",
    fil:"只支持rar格式"
    }
    var old
    function $(id){return document.getElementById(id)}
    function up(_this){
        var obj=$('file_box')
    var s=obj.style.display;
    $("file_inf").innerHTML=_html[_this.id];
        if( _this==old){
    obj.style.display=s=="none"?"block":"none";
        }
        else{
        obj.style.display="block"
        old=_this
        }
    }
    </script>
    </head>
    <body>
    <span id="pic" onclick="up(this)" style="cursor:hand">上传图片</span>
    <br>
    <span id="fil" onclick="up(this)" style="cursor:hand">上传文件</span>
    <br>
    <div id="file_box" style="display:none"><input type='file' name='file' id='file'><span id="file_inf"></span></div>
    </body>
    </html>
      

  5.   

    其实感觉caiying2009的方法更符合逻辑,因为不用用户再点关闭也可以上传另一项.
    不过还是先做出来让你参考一下吧.
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>无标题文档</title>
    <script>
    var filetext = {
        "":"",
        pic:"只支持jpg和jpeg格式的图",
        fil:"只支持rar格式"
    }function a(obj){
      var a = document.getElementById("upfile");
      if(a.t==obj.id||a.t==""||a.t==null){
        a.style.display = (a.style.display==""?"none":"");
        a.t = (a.style.display==""?obj.id:"");
        a.nextSibling.nodeValue=filetext[a.t];
      }
    }
    </script>
    </head>
    <body>
    <span id="pic" onclick="a(this)" style="cursor:hand">上传图片</span>
    <br>
    <span id="fil" onclick="a(this)" style="cursor:hand">上传文件</span>
    <br>
    <div><input type="file" id="upfile" style='display: none;'>
    </div>
    </body>
    </html>
      

  6.   

    5楼朋友做的效果正是我所要的，请问代码中的_this==old是什么意思
      

  7.   

    old
    --上次点击的<span>
    _this==old
    --当前点击的<span>==上次点击的<span>