`
lz726
  • 浏览: 329137 次
  • 性别: Icon_minigender_2
  • 来自: 福建,福州
社区版块
存档分类
最新评论

一个图片按钮实现的文件上传

JavaScriptHTMLXML 
阅读更多

做了很多的尝试,最后才在某位高手大叔的博客里,找到答案.

原先的实习思路是用样式控制的,让文件控件不显示出来,在另外一个按钮的点击事件里头调用她的onClick事件:代码如下:

xml 代码
  1. <form   name="aForm" method="post" >  
  2.  <input type="file" name="filepath"  class="ap" >form>  

 

  1. function chooseFile(){   
  2.        
  3.      var  aForm=document.forms['aForm'];   
  4.      aForm.filepath.click();   
  5.      var  filepath=aForm.filepath.value;   
  6.      if(filepath==""){   
  7.         alert("你没有选择文件");   
  8.      }else  {       
  9.          aForm.submit();   
  10.      }   
  11.         
  12.  }  

后果是:提交到后,得不到文件路径.原因是,file这个控件,它不能由让其他的控件触发它,不然得不到值.所以白做了.

 

后来,项目经理给了个思路,用动态生成的file控件试下,结果,还是不行.因为file控件,是只读的,不能通过其它的方式赋值,只有自己控件本身才能.        所以还是不行.

后来:哈哈~用透明的.既然隐藏不行,动态也不行,那就玩下透明的总可以吧...HOHO..具体代码如下:

  1. <html>  
  2. <head>  
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  4. <title>本窗口将被用于提交文件, 在父窗口再生成一个文件上传按钮title>  
  5. <style>  
  6.   .alpha{position: absolute;    
  7.          top: 0px; font-size: 44px;   
  8.          left: -640px; -moz-opacity:0;   
  9.          filter:alpha(opacity: 0); opacity: 0;}      
  10.  .imgP{position: absolute; left: 0px; top: 0px;}       
  11.     
  12. style>  
  13. <script language="JavaScript">  
  14.       window.do_upload = function(n) {    
  15.               var filename=document.getElementById('upload').value;    
  16.               if(document.getElementById('upload').value == '')  return;    
  17.               if(n==0){      
  18.                         
  19.                   document.getElementById('upload_display').style.display = 'none';   
  20.                   document.getElementById('upload_ndisplay').style.display = 'block';   
  21.                      
  22.                       
  23.               }else  if(n==1){   
  24.                   document.getElementById('upload_display').style.display = 'block';   
  25.                   document.getElementById('upload_ndisplay').style.display = 'none';   
  26.                      
  27.               }   
  28.               var l = filename.split(/[\/\\]/),    
  29.               filename = l[l.length - 1];    
  30.               parent.doSendInfo(filename);   
  31.               document.forms[n].submit();   
  32.       };   
  33. script>  
  34. head>  
  35. <body style="padding: 0px; margin: 0px; vertical-align: middle; text-align: center;">  
  36.      <span id="upload_display">  
  37.      <img src="<!---->/images/im/topimg/sendfile.gif"  class="imgP"/>  
  38.      <form action="<!---->/chat/file.shtml?method=doFile" method="post" enctype="multipart/form-data">    
  39.      <input id="upload" name="upload" type="file" onchange="do_upload(0)"   class="alpha"/>  
  40.      span>  
  41.         
  42.     <span id="upload_ndisplay" style="display: none;" >  
  43.      <img src="<!---->/images/im/topimg/sendfile.gif" class="imgP"/>  
  44.      <form action="<!---->/chat/file.shtml?method=doFile" method="post" enctype="multipart/form-data">  
  45.      <input id="upload" name="upload" type="file" onchange="do_upload(1)"  class="alpha" />form>  
  46.      span>              
  47. body>  
  48. html>  

 这是调用的部分:

  1. <iframe id=imgForm name=imgForm src="<!---->/chat/file.shtml?method=upload"     
  2.        border="0" frameborder="no" style="width:27px; height:30px;"  scrolling="no"  >iframe>  

 用了两个file控件,因为第一个提交后,让另外一个代替它.还是返回原来的界面~这样,在用户看来,那个按钮好象没变一样~哈哈~

分享到：
| 浮想联翩
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics