我想通过编程方式在<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。
如果你想让click方法在Chrome、Firefox等浏览器上也能工作,请将下面的样式应用到输入文件中。它会被完全隐藏起来,就像你在做一个显示一样:没有;
#fileInput {
visibility: hidden;
position: absolute;
top: 0;
left: -5000px;
}
就是这么简单,我测试过了!
你不能在所有浏览器中都这么做,IE应该允许,但Mozilla和Opera不允许。
当您在GMail中撰写消息时,“附加文件”功能以一种方式为IE和任何支持此功能的浏览器实现,然后以另一种方式为Firefox和那些不支持此功能的浏览器实现。
我不知道为什么你不能这样做,但有一件事是有安全风险的,而且你不允许在任何浏览器中这样做,那就是在HTML file元素上以编程方式设置文件名。
这个代码适用于我。这就是你想做的吗?
<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button id="addfiles" >Add files</button>
<script language="javascript" type="text/javascript">
$("#addfiles").click(function(){
$("#fileinput").click();
});
</script>
试试这个解决方案:http://code.google.com/p/upload-at-click/