我想通过编程方式在<input type="file">标记上生成一个点击事件。
仅仅调用click()似乎没有做任何事情,或者至少它不会弹出一个文件选择对话框。
我一直在尝试使用侦听器捕获事件并重定向事件,但我还不能像某人点击它那样实际执行事件。
我想通过编程方式在<input type="file">标记上生成一个点击事件。
仅仅调用click()似乎没有做任何事情,或者至少它不会弹出一个文件选择对话框。
我一直在尝试使用侦听器捕获事件并重定向事件,但我还不能像某人点击它那样实际执行事件。
当前回答
要做到这一点,你可以点击文件输入上的一个不可见的传递元素:
function simulateFileClick() {
const div = document.createElement("div")
div.style.visibility = "hidden"
div.style.position = "absolute"
div.style.width = "100%"
div.style.height = "100%"
div.style.pointerEvents = "none"
const fileInput = document.getElementById("fileInput") // or whatever selector you like
fileInput.style.position = "relative"
fileInput.appendChild(div)
const mouseEvent = new MouseEvent("click")
div.dispatchEvent(mouseEvent)
}
其他回答
这个解是可行的。 我们应该使用MSBLOB下载
$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
var fileName = invoiceNumberEntity + ".pdf";
var pdfDownload = document.createElement("a");
document.body.appendChild(pdfDownload);
AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
window.navigator.msSaveBlob(fileBlob, fileName);
} else { // for other browsers
var fileURL = window.URL.createObjectURL(fileBlob);
pdfDownload.href = fileURL;
pdfDownload.download = fileName;
pdfDownload.click();
}
});
};
对于AngularJS或普通javascript。
有一些方法可以将事件重定向到控件,但不要期望能够轻松地将事件发送到自己的消防控件,因为浏览器会出于(良好的)安全原因试图阻止它。
如果您只需要在用户单击某些内容时显示文件对话框,比如因为您想要更好看的文件上传按钮,那么您可能想要看看Shaun Inman想出的方法。
我已经能够通过在按下键、按下键和按上键事件之间创造性地转移焦点来实现键盘触发。YMMV。
我真诚的建议是不要去管它,因为这是一个浏览器不兼容的痛苦世界。轻微的浏览器更新也可能会在没有警告的情况下阻止一些技巧,你可能不得不不断地重新发明一些技巧来保持它的工作。
如果你想让click方法在Chrome、Firefox等浏览器上也能工作,请将下面的样式应用到输入文件中。它会被完全隐藏起来,就像你在做一个显示一样:没有;
#fileInput {
visibility: hidden;
position: absolute;
top: 0;
left: -5000px;
}
就是这么简单,我测试过了!
我知道这很老了,所有这些解决方案都是针对浏览器安全预防措施的黑客,具有真正的价值。
也就是说,到今天为止,fileInput.click()可以在当前的Chrome (36.0.1985.125 m)和当前的Firefox ESR(24.7.0)中工作,但不能在当前的IE(11.0.9600.17207)中工作。在一个按钮的顶部覆盖一个不透明度为0的文件字段是可行的,但是我想要一个链接元素作为可见的触发器,并且悬停下划线在任何浏览器中都不太适用。它闪烁着然后消失了,可能是浏览器在考虑是否实际应用悬浮样式。
但我确实找到了一个在所有这些浏览器中都能工作的解决方案。我不会说我测试过所有浏览器的每个版本,也不会说我知道它会一直工作下去,但它现在似乎满足了我的需求。
这很简单:将文件输入字段定位到屏幕外(Position: absolute;顶部:-5000px),在它周围放一个标签元素,并触发标签上的点击,而不是文件字段本身。
请注意,链接需要编写脚本来调用标签的click方法,它不会自动完成,就像单击标签元素中的文本一样。显然,link元素捕获了点击,而没有传递到标签。
还要注意,这并没有提供显示当前所选文件的方法,因为该字段是屏幕外的。我想在文件被选中时立即提交,所以这对我来说不是问题,但如果您的情况不同,您将需要某种不同的方法。
它是有效的:
出于安全原因,在Firefox和Opera上,你不能触发点击文件输入,但你可以用MouseEvents模拟:
<script>
click=function(element){
if(element!=null){
try {element.click();}
catch(e) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
element.dispatchEvent(evt);
}
}
};
</script>
<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">