相关疑难解决方法(0)

我需要一个解决方案来在HTML中显示打开文件对话框,同时单击a div.div单击时,必须打开打开文件对话框.

我不想将输入文件框显示为HTML页面的一部分.它必须显示在单独的对话框中,该对话框不是网页的一部分.

我有一个HTML表单(upload.htm),里面有一个HTML文件上传控件.

<form id="frmupload" name="upload" enctype="multipart/form-data" action="uploadhandler.ashx" method="post">
    <input id="uploader" name="uploadctrl" type="file"/>
</form>

上面的页面中还有一个JavaScript方法,如:

function performUpload(){
    document.getElementById('frmupload').submit();
}

我从一个页面(uploadpage.htm)中调用它iframe:

<iframe id="docframe" src="upload.htm" style="display:none"></iframe>

我尝试从uploadpage.htm页面执行下面的语句:

var i = document.getElementById('docframe');
i.contentWindow.performUpload();

我得到一个错误,说访问被拒绝,我的调试器停止在我显示的第一个JavaScript函数.这两个文件都位于Web项目中的相同位置.他们也有相同的域名.为什么我会收到此错误？

当然,早些时候,我可以发布页面:当我没有name为HTML上传控件设置属性时.但是在我在HTML标记中设置name属性后,我得到了这个奇怪的错误.为什么我第一次没有这个？

看看@ this post - > "访问被拒绝"当脚本试图访问IE8中的iframe时,但它没有帮助.

<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中运行.

这是我的情况、代码和来自 Stackoverflow 的参考。

我想触发打开的对话框，我找到了参考资料，但它们似乎不起作用；

首先是我的代码片段：

                <i class="fas fa-upload uploadicon"></i><br>
                Drop document here or 
                <a href="javascript:;" class="dropimgmessage" id="uploadLink" name="uploadLink" ngbTooltip="Click to upload a document or drag here!" placement="top">browse</a>
                <input type="file" class="form-control fileuploader" #fileInput  id="api-file-container" formControlName="docUpload" name="api-file-container" (change)="handleFileInput($event.target.files)">
                <span class="dropimagetypemsg">Supports PDF, JPG, PNG, GIF</span>

现在我的打字稿：

declaration of variables:

public uploadlink: HTMLElement;
public fileinput: HTMLElement;

------

ngAfterViewInit() {

    this.uploadlink = document.querySelector('#uploadLink') as HTMLElement;
    this.fileinput = document.querySelector('#api-file-container') as HTMLElement;

    this.uploadlink.addEventListener('click', (e: Event) => {
      e.preventDefault();
      this.fileinput.click();
    });

}  

发生的情况是代码被触发，但从未进入片段：

this.uploadlink.addEventListener('click', (e: Event) => { …