我想以<input type="file">编程方式在标记上触发click事件.
只是调用click()似乎没有做任何事情,或者至少它没有弹出文件选择对话框.
我一直在尝试使用侦听器捕获事件并重定向事件,但是我无法像点击某个人那样实际执行事件.
<input type="file" id="file-id" name="file_name" onchange="theimage();">
Run Code Online (Sandbox Code Playgroud)
这是我的上传按钮.
<input type="text" name="file_path" id="file-path">
Run Code Online (Sandbox Code Playgroud)
这是我必须显示文件完整路径的文本字段.
function theimage(){
var filename = document.getElementById('file-id').value;
document.getElementById('file-path').value = filename;
alert(filename);
}
Run Code Online (Sandbox Code Playgroud)
这是解决我问题的JavaScript.但在警报值给了我
C:\fakepath\test.csv
Run Code Online (Sandbox Code Playgroud)
和Mozilla给了我:
test.csv
Run Code Online (Sandbox Code Playgroud)
但我想要本地完全限定的文件路径.如何解决这个问题?
如果这是由于浏览器安全问题,那么应该采用哪种替代方法呢?
我正在编写一些需要click为链接触发事件的JavaScript代码.在Internet Explorer中,我可以这样做
var button = document.getElementById('myButton');
button.click();
Run Code Online (Sandbox Code Playgroud)
但这在Firefox中不起作用,我假设任何其他浏览器.在Firefox中,我做到了这一点
var button = document.getElementById('myButton');
window.location = button.href;
Run Code Online (Sandbox Code Playgroud)
我觉得这不是最好的方法.有没有更好的方法来触发click事件?优选地,无论元素类型或浏览器如何都可以工作.
这基本上和简化了我现在拥有的:
<style>
form.noshow { height: 0; overflow: hidden; }
</style>
<form class=noshow target="SomeIframeThatExists">
<input type=file id=uf>
</form>
<a id=uflink href="/user/photo">Upload photo</a>
<script>
$('uf').addEvent('change', function(e) {
// alert('oele'); // this would work fine
this.form.submit(); // auch in IE > "Access denied" exception
});
$('uflink').addEvent('click', function(e) {
$('uf').click(); // opens file dialog in all browsers inc IE
return false;
});
</script>
Run Code Online (Sandbox Code Playgroud)
它在Chrome 11和FF 4中的作用(完美):
非常高科技和甜蜜.
在IE中,所有这些都有效,除了[6].表格未提交.Javascript错误:"访问被拒绝".无论表单如何不可见,只要打开对话框input.click(),表单就无法提交更改.(onchange函数执行正常.只有在form.submit()调用时才会出现错误.)
现在所有这一切我都能接受.IE糟透了.我和它一起生活.
到目前为止,我的解决方案是检查navigator"MSIE",然后单击链接而不是打开对话框,显示表单(带文件输入).然后用户必须单击实际的,丑陋的文件输入,然后一切正常.但丑陋.
问题有两个: …
我使用以下程序化了My File输入:
<html>
<head>
<style>
#yourBtn{
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
border-radius: 5px;
border: 1px dashed #ddeeff;
text-align: center;
background-color: #ffddee;
cursor:pointer;
color:#333333;
}
</style>
<script type="text/javascript">
function getFile(){
document.getElementById("upfile").click();
}
function sub(obj){
document.getElementById("yourBtn").innerHTML = "Uploading Please Wait...";
document.myForm.submit();
event.preventDefault();
}
</script>
</head>
<body>
<center>
<form action="/sub/upload.php" method="POST" enctype="multipart/form-data" name="myForm" target="myiframe">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" name="upload" style="display:none;" onchange="sub(this)" /></div>
</form>
<iframe name="myiframe" style="width:100;height:100;border:2px solid #bbccdd;"></iframe> …Run Code Online (Sandbox Code Playgroud)