如何用javascript 实现文件选择器，不适用<input type=file>?

还是关于昨天的问题，客户要求文件选择和提交必须是一个按钮。
开始做法隐藏文件选择控件，然后再保存按钮中调用文件选择控件的click方法，然后提交，这样做存在权限问题不能实现，所以现在想自己用javascript实现自定义的文件选择控件，各位能不能给点提示？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<input id="f" type="file" style="display:none" onpropertychange="document.getElementById('s').innerText=this.value" />
<a href="javascript:document.getElementById('f').click()">browse...</a><br /><span id="s"></span>
ls的挺好。
如果一选择然后就上传了，就用AJAX
代码试过吗,那样根本上传不上
把type="file"控件设置成完全透明,然后做一个图片按钮,让他们完全重合.注意图片要在上面.
<HTML>
<HEAD>
<script language="JavaScript" type="text/javascript">
function fileSelectBtn()
{
document.form1.fileselect.click();
document.form1.filepath.value = document.form1.fileselect.value;
document.form1.submit();}
</script>
</HEAD>
<body>
<FORM enctype="multipart/form-data" NAME="form1" METHOD="post" ACTION="test.html">
<input type="file" name="fileselect" style="display: none">
<input type=button name="btnSubmit" onclick="fileSelectBtn()" value="UP">
<input type=text name="filepath" size=38 readonly>
</form>
</body>
</html>
我就想把提交按钮和文件控件合并，但这样做后提示access is denied.
你可以看一下，file里面根本不会有值的，<HTML>
<HEAD>
<script language="JavaScript" type="text/javascript">
function fileSelectBtn()
{
document.form1.fileselect.click();
document.form1.filepath.value = document.form1.fileselect.value;
document.form1.submit();
}
</script>
</HEAD>
<body>
<FORM enctype="multipart/form-data" NAME="form1" METHOD="post" ACTION="test.aspx">
<input type="file" name="fileselect">
<input type=button name="btnSubmit" onclick="fileSelectBtn()" value="UP">
<input type=text name="filepath" size=38 readonly>
</form>
</body>
</html>现在的浏览器安全程度做的很高，不允许使用这种方法了。
嘿嘿前几天还回答了个类似的问题。。
<script type="text/javascript">
Object.reEvent = function () {
//获取Event
return window.event ? window.event : (function (o) {
do {
o = o.caller;
} while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0]));
return o.arguments[0];
})(this.reEvent);
};var $P = { reMouse : function () {
//获取鼠标绝对位置
var e = Object.reEvent();
return {
x : (document.documentElement.scrollLeft || document.body.scrollLeft) + e.clientX,
y : (document.documentElement.scrollTop || document.body.scrollTop) + e.clientY
};
}
};function submit() {
document.form1.submit();
}var show = function () { var mos = $P.reMouse(), wc = document.getElementById("wc");

with (wc.style) {
left = mos.x - 200 + "px";
top = mos.y - 10 + "px";
}
};
window.onload = function () {
var wc = document.getElementById("wc");
wc.onchange = function () {
wc.parentNode.appendChild(wc.cloneNode(true));
wc.id = "";
wc.style.display = "none";
};
};
</script><form id="form1">

<div>
<input type="file" name="file" id="wc" style="top:0px;height:20px;position:absolute;opacity:0;filter:alpha(opacity=0);">
</div>
<input type="button" value="增加" onmousemove="show()">
<input type="button" value="提交" onclick="submit()">
</form>
没用的全去掉。。<script type="text/javascript">
Object.reEvent = function () {
//获取Event
return window.event ? window.event : (function (o) {
do {
o = o.caller;
} while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0]));
return o.arguments[0];
})(this.reEvent);
};var $P = { reMouse : function () {
//获取鼠标绝对位置
var e = Object.reEvent();
return {
x : (document.documentElement.scrollLeft || document.body.scrollLeft) + e.clientX,
y : (document.documentElement.scrollTop || document.body.scrollTop) + e.clientY
};
}
};function submit() {
document.form1.submit();
}var show = function () { var mos = $P.reMouse(), wc = document.getElementById("wc");

with (wc.style) {
left = mos.x - 200 + "px";
top = mos.y - 10 + "px";
}
};
</script><form id="form1">

<div>
<input type="file" name="file" id="wc" style="top:0px;height:20px;position:absolute;opacity:0;filter:alpha(opacity=0);">
</div>
<input type="button" value="增加" onmousemove="show()">
<input type="button" value="提交" onclick="submit()">
</form>
调用file的click是不行的，只是个样式，上传会出错；
正确的方法应该是将file设置为透明，zIndex最高，
在file下面放一个UI，别人点击UI，实际是点击透明的file button.