能否用js模拟用户点击了上传文件的“浏览”按钮？.click()好像只能在IE中执行。

我记得书里面讲,gmail是采用了一个"隐型的"文件上传控件(input控件)悬浮在伪装的按钮上面,用户点击其实是点击了那个隐型的按钮~~~从而达到那种效果~~

IE下可以用obj.click()，但firefox要添加一个MouseEvents。var a=document.createEvent("MouseEvents");
a.initEvent("click", true, true);
obj.dispatchEvent(a);

- -！代码都给出了，还实例。汗。<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>

<!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>

文件上传控件,即使用js调用了click方法选择了上传文件~但是提交以后文件是不会上传的!
所以别那么做~~~可以仿效gmail那个做法~~

测试过，证实file域在FF下不行。没办法，你只能用美工去做一个上传按钮的层，然后定义绝对位置，把file域透明度设为0，这种方法来实现，FF下是用click或者dispatchEvent也不行。

你是要干嘛?选择文件后直接上传?不用在按"确定",或者"上传"?如果是的话<file>的onchange()里把表单submit()就可以了

没用的，用脚本[.click()]触发的点击，上传不了的。

听说过用obj.click()脚本去触发只能显示而实际不能上传，我没试过，但我用WScript.Shell的sendkeys去写入那个值却能上传。我觉得楼主的意图只是模拟click()，用透明层和绝对位置就能实现了，你的意图又不是全自动选好并添加到file域，为什么非要用那个JS去实现。

<!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>

仿126网络硬盘上传我试过了可以上传
如果是纯粹的click事件是没用，IE基于安全性，在onsubmit的时候会自动清空文件域的value如能像126那样用css来控制

兼容Firefox<!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>

调试易

能否用js模拟用户点击了上传文件的“浏览”按钮？.click()好像只能在IE中执行。

解决方案 »