做了很多的尝试,最后才在某位高手大叔的博客里,找到答案.
原先的实习思路是用样式控制的,让文件控件不显示出来,在另外一个按钮的点击事件里头调用她的onClick事件:代码如下:
xml 代码
- <form name="aForm" method="post" >
- <input type="file" name="filepath" class="ap" >form>
- function chooseFile(){
- var aForm=document.forms['aForm'];
- aForm.filepath.click();
- var filepath=aForm.filepath.value;
- if(filepath==""){
- alert("你没有选择文件");
- }else {
- aForm.submit();
- }
- }
后果是:提交到后,得不到文件路径.原因是,file这个控件,它不能由让其他的控件触发它,不然得不到值.所以白做了.
后来,项目经理给了个思路,用动态生成的file控件试下,结果,还是不行.因为file控件,是只读的,不能通过其它的方式赋值,只有自己控件本身才能. 所以还是不行.
后来:哈哈~用透明的.既然隐藏不行,动态也不行,那就玩下透明的总可以吧...HOHO..具体代码如下:
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <title>本窗口将被用于提交文件, 在父窗口再生成一个文件上传按钮title>
- <style>
- .alpha{position: absolute;
- top: 0px; font-size: 44px;
- left: -640px; -moz-opacity:0;
- filter:alpha(opacity: 0); opacity: 0;}
- .imgP{position: absolute; left: 0px; top: 0px;}
- style>
- <script language="JavaScript">
- window.do_upload = function(n) {
- var filename=document.getElementById('upload').value;
- if(document.getElementById('upload').value == '') return;
- if(n==0){
- document.getElementById('upload_display').style.display = 'none';
- document.getElementById('upload_ndisplay').style.display = 'block';
- }else if(n==1){
- document.getElementById('upload_display').style.display = 'block';
- document.getElementById('upload_ndisplay').style.display = 'none';
- }
- var l = filename.split(/[\/\\]/),
- filename = l[l.length - 1];
- parent.doSendInfo(filename);
- document.forms[n].submit();
- };
- script>
- head>
- <body style="padding: 0px; margin: 0px; vertical-align: middle; text-align: center;">
- <span id="upload_display">
- <img src="/images/im/topimg/sendfile.gif" class="imgP"/>
- <form action="/chat/file.shtml?method=doFile" method="post" enctype="multipart/form-data">
- <input id="upload" name="upload" type="file" onchange="do_upload(0)" class="alpha"/>
- span>
- <span id="upload_ndisplay" style="display: none;" >
- <img src="/images/im/topimg/sendfile.gif" class="imgP"/>
- <form action="/chat/file.shtml?method=doFile" method="post" enctype="multipart/form-data">
- <input id="upload" name="upload" type="file" onchange="do_upload(1)" class="alpha" />form>
- span>
- body>
- html>
这是调用的部分:
- <iframe id=imgForm name=imgForm src="/chat/file.shtml?method=upload"
- border="0" frameborder="no" style="width:27px; height:30px;" scrolling="no" >iframe>
用了两个file控件,因为第一个提交后,让另外一个代替它.还是返回原来的界面~这样,在用户看来,那个按钮好象没变一样~哈哈~