首页 新闻 论坛 群组 Blog 文档 下载 读书 Tag 网摘 搜索 .NET Java 游戏 视频 人才 外包 培训 数据库 书店 程序员
中国软件网
欢迎您:游客 | 登录 注册 帮助
    • 能否用js模拟用户点击了上传文件的“浏览”按钮？.click()好像只能在IE中执行。 [已结贴,结贴人:laosan]
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-22 12:20:14 楼主
    能否用js模拟用户点击了上传文件的“浏览”按钮？.click()好像只能在IE中执行，正确应该是什么事件。
    200  修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-22 12:42:341楼 得分:10
    HTML标准里面不包含这个功能，也不知道有什么浏览器支持这个功能。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • he_8134
    • 等级:
    发表于：2007-10-22 13:35:082楼 得分:10
    我记得书里面讲,gmail是采用了一个"隐型的"文件上传控件(input控件)悬浮在伪装的按钮上面,用户点击其实是点击了那个隐型的按钮~~~从而达到那种效果~~
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-22 13:41:173楼 得分:10
    IE下可以用obj.click()，但firefox要添加一个MouseEvents。

    var a=document.createEvent("MouseEvents");
    a.initEvent("click", true, true);
    obj.dispatchEvent(a);
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-22 13:49:324楼 得分:10
    3楼的学习了.....
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-22 14:03:105楼 得分:10
    4楼的大哥，你才值得我学习。你的知识面比我广得多。。。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-22 14:29:236楼 得分:0
    两位大哥，请给个实例代码。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-22 14:43:347楼 得分:10
    - -！代码都给出了，还实例。。。。汗。。。。

    <div id="a1" onclick="alert('我是一个div，你点了我的onclick事件了')">

    <script>
    var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;
    if(ie){document.getElementById('a1').click()}//IE的处理
    else{var a=document.createEvent("MouseEvents");//FF的处理
    a.initEvent("click", true, true);
    document.getElementById('a1').dispatchEvent(a);
    }
    </script>
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-22 15:44:138楼 得分:10
    说实在这东西我还真不会.记下了.谢谢!
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-22 15:52:449楼 得分:0
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js模拟点击“浏览”按钮 </title>
    </head>

    <body>
    <div>
    <form id="form1" name="form1" enctype="multipart/form-data" method="post" action="1.php">
    <input type="file" id="file"name="file" />
    <input type="button" name="button" value="点我就像点击“浏览”按钮一样" onclick="javascript:clickBrowse();" />
    </form>
    </body>
    <script type="text/javascript">
    function clickBrowse(){
    var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;
    if(ie){
    document.getElementById("file").click();
    }else{//请帮我补足这段代码
    //var a=document.createEvent("MouseEvents");//FF的处理
    //a.initEvent("click", true, true); 
    //document.getElementById("file").dispatchEvent(a);
    }
    }
    </script>
    </html>
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-22 15:54:3010楼 得分:0
    反正上面的程序在FF里面没有效果
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • he_8134
    • 等级:
    发表于：2007-10-22 16:00:5111楼 得分:10
    文件上传控件,即使用js调用了click方法选择了上传文件~但是提交以后文件是不会上传的!
    所以别那么做~~~

    可以仿效gmail那个做法~~
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-22 16:55:0212楼 得分:10
    测试过，证实file域在FF下不行。没办法，你只能用美工去做一个上传按钮的层，然后定义绝对位置，把file域透明度设为0，这种方法来实现，FF下是用click或者dispatchEvent也不行。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-23 17:34:4613楼 得分:10
    你是要干嘛?选择文件后直接上传?不用在按"确定",或者"上传"?

    如果是的话 <file>的onchange()里把表单submit()就可以了
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • jiaxueq
    • 等级:
    发表于：2007-10-23 20:31:2014楼 得分:10
    没用的，用脚本[.click()]触发的点击，上传不了的。

    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-24 01:40:4015楼 得分:10
    听说过用obj.click()脚本去触发只能显示而实际不能上传，我没试过，但我用WScript.Shell的sendkeys去写入那个值却能上传。我觉得楼主的意图只是模拟click()，用透明层和绝对位置就能实现了，你的意图又不是全自动选好并添加到file域，为什么非要用那个JS去实现。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-25 09:19:4916楼 得分:0
    是啊，模拟了也不能上传。

    主要是给客户做的英文版本里面，这个按钮上是：“浏览”两个系统的字，我以为可以换掉呢。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-25 15:23:2817楼 得分:80
    HTML code
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿126网络硬盘上传 by littlelam</title>
</head>
<script>
var TotalFiles = 0;
function AddFiles()
{
    TotalFiles ++;
    var file=document.createElement("input"); 
    file.type = "file";
    file.id = "f"+ TotalFiles.toString();
    file.name = "files"+ TotalFiles.toString(); 
    file.hideFocus = true;
    file.style.cssText = "cursor:pointer; width:1px; border:none; height:32px; padding:0px; margin:0px;position:absolute; opacity:0;filter:alpha(opacity=0);font-size:20px;";
    file.onchange = function ()
    {
        $("s"+TotalFiles.toString()).innerHTML = $("f"+TotalFiles.toString()).value.substring($("f"+TotalFiles.toString()).value.lastIndexOf("\\")+1,$("f"+TotalFiles.toString()).value.length) + "    <span onclick=\"DelFile('"+TotalFiles.toString()+"')\" style=\"cursor:pointer;color:red\">X</span>";
        this.style.display = "none";
        AddFiles();
    };
    $("UpFilePanelHidden").appendChild(file);
    var div=document.createElement("div"); 
    div.id = "s"+ TotalFiles.toString();
    $("UpFilePanelShow").appendChild(div);

}
function $(str)
{
    return document.getElementById(str);
}
function DelFile(str)
{
    $("UpFilePanelHidden").removeChild($("f"+str));
    $("UpFilePanelShow").removeChild($("s"+str));    
}
function DelEmpty()
{
    for (var i=1;i<=TotalFiles;i++)
    {
        if ($("f"+i.toString()))
        {
            if ($("f"+i.toString()).value == "")
                $("UpFilePanelHidden").removeChild($("f"+i.toString()));
        }
            
    }
}
</script>
<body>
<FORM METHOD="post" NAME="form1" ACTION="savetofile.asp" ENCTYPE="multipart/form-data" onsubmit="DelEmpty();return true;">
<div style="width:100px; height:30px;background-image:url(http://mimg.163.com/netfolder/images/all_toolbar.gif);background-position:2px -64px; margin:6px 4px; border:1px solid #bebebe; cursor:pointer; "><a id="UpFilePanelHidden" href="javascript:void(0);" ></a></div>
<div id="UpFilePanelShow"></div><script>AddFiles();</script>
<br />
<input type="submit" name="Submit" value="提交" />
</form>
</body>
</html>
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-25 15:26:4818楼 得分:0
    仿126网络硬盘上传 我试过了可以上传
    如果是纯粹的click事件是没用，IE基于安全性，在onsubmit的时候会自动清空文件域的value

    如能像126那样用css来控制
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-25 15:34:1919楼 得分:0
    兼容Firefox
    HTML code
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿126网络硬盘上传 by littlelam</title>
</head>
<script>
var TotalFiles = 0;
function AddFiles()
{
    TotalFiles ++;
    var file=document.createElement("input"); 
    file.type = "file";
    file.id = "f"+ TotalFiles.toString();
    file.name = "files"+ TotalFiles.toString(); 
    file.hideFocus = true;
    file.size = 1;
    file.style.cssText = "cursor:pointer; width:1px; border:none; height:32px; padding:0px; margin:0px;position:absolute; opacity:0;filter:alpha(opacity=0);left:-32px !important;left:-5px;left/**/:-3px; font-size:20px;";
    file.onchange = function ()
    {
        $("s"+TotalFiles.toString()).innerHTML = $("f"+TotalFiles.toString()).value.substring($("f"+TotalFiles.toString()).value.lastIndexOf("\\")+1,$("f"+TotalFiles.toString()).value.length) + "    <span onclick=\"DelFile('"+TotalFiles.toString()+"')\" style=\"cursor:pointer;color:red\">X</span>";
        this.style.display = "none";
        AddFiles();
    };
    $("UpFilePanelHidden").appendChild(file);
    var div=document.createElement("div"); 
    div.id = "s"+ TotalFiles.toString();
    $("UpFilePanelShow").appendChild(div);

}
function $(str)
{
    return document.getElementById(str);
}
function DelFile(str)
{
    $("UpFilePanelHidden").removeChild($("f"+str));
    $("UpFilePanelShow").removeChild($("s"+str));    
}
function DelEmpty()
{
    for (var i=1;i<=TotalFiles;i++)
    {
        if ($("f"+i.toString()))
        {
            if ($("f"+i.toString()).value == "")
                $("UpFilePanelHidden").removeChild($("f"+i.toString()));
        }
            
    }
}
</script>
<body>
<FORM METHOD="post" NAME="form1" ACTION="savetofile.asp" ENCTYPE="multipart/form-data" onsubmit="DelEmpty();return true;">
<div style="width:100px; height:30px;background-image:url(http://mimg.163.com/netfolder/images/all_toolbar.gif);background-position:2px -64px; margin:6px 4px; border:1px solid #bebebe; cursor:pointer; "><a id="UpFilePanelHidden" href="javascript:void(0);" ></a></div>
<div id="UpFilePanelShow"></div><script>AddFiles();</script>
<br />
<input type="submit" name="Submit" value="提交" />
</form>
</body>
</html>
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2007-10-25 17:37:0520楼 得分:0
    学习啦
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • songpengasp
    • 等级:
    发表于：2007-10-26 15:47:3321楼 得分:0
    呵呵 我的 FF 点 "添加文件" 的 "件" 出不来 选择窗口
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • CutBug
    • 等级:
    发表于：2007-10-26 15:52:1122楼 得分:0
    路过，学习
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-03-27 14:38:5123楼 得分:0
    推荐大家搜一下这个SWFUpload
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于：2008-08-21 15:50:2024楼 得分:0
    好，学习了，谢谢高手，即用急用
    修改