我想以<input type="file">编程方式在标记上触发click事件.
只是调用click()似乎没有做任何事情,或者至少它没有弹出文件选择对话框.
我一直在尝试使用侦听器捕获事件并重定向事件,但是我无法像点击某个人那样实际执行事件.
我有一个看起来像这样的网页
<html>
<head>
<title>File Upload Click Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div onclick="$('input[type=file]').click()" >CLICK SIMULATOR</div>
<input type="file"></input>
</body>
</html>
我的目标是让div在文件输入上引发点击事件,这似乎与我在IE和Chrome中所期望的完全一样,但在Firefox中不起作用(当你点击时没有打开文件浏览器div).
有没有办法让这个在FF工作？
如何自动触发文件输入？即.在下面的链接中我想在加载时触发上传按钮
<form id="test_form">
<input type="file" id="test">
<div id="test1">
<button>Upload</button>
</div>
</form>
$("#test1").trigger('click');
$("#test").trigger('click');
我<iframe>在我的应用程序(使用ExtJS 4.2的单页面应用程序)中使用(我知道,我知道......)进行文件下载,因为它们包含大量数据并且可能需要一段时间来生成Excel文件(我们根据参数,从20秒到20分钟说话.
当前的状态是:当用户点击下载按钮时,他被Javascript(window.location.href = xxx)"重定向" 到执行导出的页面,但由于它是在PHP中完成的,并且没有发送标题,浏览器会不断加载页面,直到文件下载.但它不是非常用户友好,因为没有任何东西显示它是否仍在加载,完成(文件下载除外)或失败(这导致页面实际重定向,可能使他失去他正在做的工作).
所以我创建了一个停靠在右下角的小型非模态窗口,其中包含iframe以及一条小消息以确保用户放心.我需要的是能够检测何时加载并能够区分2种情况:
但是,我尝试了所有4个事件(W3Schools的文档),并没有被永远开除.我至少可以理解,如果它不是返回的HTML数据,它可能无法触发事件,但即使我强制错误返回文本数据,它也不会被触发.
如果有人知道这个的解决方案,或者可能适合这里的替代系统,我全都耳朵!谢谢 !
编辑:添加iframe代码.我们的想法是获得一个更好的方法来关闭它而不是一个setTimeout.
var url = 'http://mywebsite.com/my_export_route';
var ifr = $('<iframe class="dl-frame" src="'+url+'" width="0" height="0" frameborder="0"></iframe>');
ifr.appendTo($('body'));
setTimeout(function() {
$('.dl-frame').remove();
}, 3000);
我想在用户单击允许他们下载文件的超链接后将用户重定向到其他网页.但是,由于他们需要在打开/保存文件对话框中进行选择,因此我不想在他们接受下载之前重定向它们.
如何检测到他们执行了此操作？
我正在网页中开发一些程序化自动化,并试图在Chrome 56(特别是56.0.2924.87)的输入网页元素中输入击键,似乎无法使其正常工作.
我已经完成了我的家庭作业并尝试了许多在线示例,包括在此处找到的示例:Javascript - 模拟Chrome 53上的关键事件,但没有运气.
这是我最近(目前不工作)的尝试,基于上述问题中提供的解决方案:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Keyboard Events</title>
</head>
<body>
<input id="id_input" onkeydown="console.log(event);">
<button onclick="
var e = new Event('keydown');
e.keyCode = 65;
document.getElementById('id_input').dispatchEvent(e);
">click me</button>
</body>
</html>您可以观察正在生成的事件,但输入Web元素中不会出现任何字符.
我非常感谢一个有效的JavaScript示例,在Chrome 56中工作,按下页面上的按钮和出现在输入web元素中的字符,不设置输入web元素的"value"属性.工作解决方案必须导致字符仅通过使用事件(可能是keypress/keydown等)出现
更新:我的问题与此问题不同:如何在JavaScript中触发事件？因为我已经在使用解决方案中列出的dispatchEvent方法了.我的问题的答案可能包括我所包含的第一个链接的多次尝试中尚未概述的额外步骤.
我正在玩JavaScript并编写简单的函数来创建INPUTelement(type="file")并模拟点击.
var createAndCallFileSelect = function () {
var input = document.createElement ("input");
input.setAttribute ("type", "file");
input.addEventListener ("change", function () {
console.log (this.files);
}, false);
input.click();
}
它大部分时间都很有效,但有时它不会onChange在选择文件时触发事件(或者在使用multiple属性时使用更多文件INPUT).
我知道onChange当你重新选择同一个文件时不会触发,但很明显这不是这里的情况.它仅在我第一次使用此功能时才触发事件,有时仅触发.onChange如果从对话框中选择了某些内容,则每次下一次点击通
已经尝试在这里和周围寻找这个问题,但似乎所有onChange问题和解决方案都与重新选择相同文件的着名问题有关.
我发现这种情况发生在最新的Opera和Firefox上,从未在其他浏览器上测试过.也.我试图等待整个页面加载,但结果仍然相同 - 有时它不会onChange在第一次调用时触发.
任何人都可以向我解释为什么会这样吗？我已经有了解决方法代码,这不是问题,只需要解释为什么在创建INPUT并以这种方式调用时会发生这种情况.
级联延迟
var function createAndCallFileSelect = function () {
var input = document.createElement ("input");
setTimeout (function () { // set type with 1s delay
input.setAttribute ("type", "file"); …<input type="file" id="browse-button"/>我的HTML中有一个文件浏览器输入.
我有另一个带ID的按钮choose-file-button,当点击时,会打电话document.getElementById("browse-button").click();.单击此按钮时,它会正确单击#browse-button并打开文件对话框.
现在,我从这个答案中获取代码来拦截一个Ctrl+O按键并打开我的文件对话框,所以我有这个:
$(window).bind('keydown', function(e)
{
if (e.ctrlKey || e.metaKey)
{
switch (String.fromCharCode(e.which).toLowerCase())
{
case 's':
e.preventDefault();
// doesn't matter for this question
return false;
case 'o':
e.preventDefault();
document.getElementById("choose-file-button").click();
return false;
}
}
return true;
});
正如你所看到的,当我拦截时,Ctrl+O我点击我的#choose-file-button按钮,它document.getElementById("browse-button");在其onclick处理程序中调用.我在这个点击处理程序中放了一个断点,当我按下Ctrl+O它时会到达这个断点.但是,文件对话框永远不会显示.
通过调试,我发现如果我放alert(...);了#choose-file-button click()一行,那么警报会出现,并显示正常页面"打开文件"对话框(不是我的文件对话框).但是,如果我没有此警报,则根本不显示任何内容.
这是一个错误吗？如何修复它并通过截获显示我的文件对话框Ctrl+O？
编辑:我刚刚在Chrome中测试过,效果很好.但是,它仍然无法在Firefox中运行.
在Chrome版本72.0.3626.96中,我有一个简单的例子,我设置了一个锚<a>(使用bootstrap设计为按钮),我也设置了一个<input type="file">.我隐藏了<input type="file">使用CSS,然后在单击锚点时使用一些JavaScript来触发文件选择对话框.
例如:
$('#upload-button').on('click', function(e) {
if (confirm('Are you sure?')) {
$('#upload-file').trigger('click');
}
});#upload-file {
display: none;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<a id="upload-button" class="btn btn-primary">
<span>Upload Something!</span>
</a>
<input type="file" id="upload-file">
</div>
</div>
</div>它应该工作的方式是用户点击<a>按钮,这将启动一个确认对话框,然后,用户单击"确定",这将打开文件选择对话框.
这适用于Firefox和早期版本的Chrome,奇怪的是它甚至可以在Chrome版本72.0.3626.96中使用,只要您在确认消息打开后足够快地单击确定消息中的"确定"按钮即可.
问题是,如果您在确认消息打开后等待2-4秒,然后单击"确定",则不会打开文件选择对话框.
有关如何使这项工作的任何想法？这个Chrome版本中是否应该提交这是一个合法的错误？
更新:我已经得出结论,这是很可能以某种方式与使用者启动的安全更新(虽然我不知道具体为什么)......然而似乎从长远来看,更容易和更清洁反正只需更换老同学confirm()用更现代的模态方法.单击引导模式中的实际按钮似乎始终正常工作.
新例子在这里:
$('#upload-button').on('click', function() {
$('#upload-confirm-modal').modal();
});
$('#upload-confirm-button').on('click', function() {
$('#upload-file').trigger('click');
$('#upload-confirm-modal').modal('hide');
});#upload-file {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> …我正在尝试使用 jquery 打开新选项卡。但是，它不适用于 safari 或 Mac。
我的代码：
<script>
$(document).ready(function(){
$.ajax({
type: 'post',
dataType: 'html',
url:'http://localhost/test/remoteContent.html',
async: false,
success:function(data){
window.open("http:google.com",'_blank');
}
})
});
</script>
javascript ×9
jquery ×5
html ×4
browser ×1
dialog ×1
download ×1
file-upload ×1
iframe ×1
onchange ×1
safari ×1