从 onchange 触发 .click() 时 IE9 上出现“SCRIPT5 访问被拒绝”错误
Posted
技术标签:
【中文标题】从 onchange 触发 .click() 时 IE9 上出现“SCRIPT5 访问被拒绝”错误【英文标题】："SCRIPT5 Access is denied" error on IE9 when firing .click() from onchange 【发布时间】：2012-10-28 17:32:35 【问题描述】：我们希望减少用户在我们的网站上上传文件所需的步骤；所以我们使用 jQuery 使用以下标记（简化）打开和回发文件：
<a onclick="$('#uplRegistrationImage').click();">
Change profile picture
</a>
<!-- Hidden to keep the UI clean -->
<asp:FileUpload ID="uplRegistrationImage"
runat="server"
ClientIDMode="static"
Style="display:none"
onchange="$('#btnSubmitImage').click();" />
<asp:Button runat="server"
ID="btnSubmitImage"
ClientIDMode="static"
Style="display:none"
OnClick="btnSubmitImage_OnClick"
UseSubmitBehavior="False" />
这在 Firefox 和 Chrome 中运行良好；单击链接时打开文件对话框，并在选择文件时触发回发。
但是在 IE9 中加载文件上传并且用户选择了一个文件之后；代替 OnChange 工作，我收到“SCRIPT5 访问被拒绝”错误。我尝试设置任意超时，设置间隔以检查文件是否无效。
还有许多与此相关的其他问题；但是似乎没有一个像样的答案（有人说将文件对话框设置为透明并悬停在按钮后面！）
其他人解决了这个问题吗？或者我为 IE 用户提供一个按钮是绝对必要的吗？
【问题讨论】：
为什么不直接将 上的 onclick 发送到与 $('#uplRegistrationImage') 的 onclick 相同的函数？ onclick 打开文件对话框；出于安全原因，您尝试执行的操作是不可能的。似乎 IE9 不允许您以这种方式提交表单，除非它是在 File Upload 控件上的实际鼠标单击触发它。
为了争论，我可以使用您的代码在 change 处理程序中进行提交，但它仅在我自己单击 Browse 按钮时才起作用。我什至在$(document).ready 方法中为change 处理程序设置的变量设置了轮询，指示应该触发提交 - 这也不起作用。
这个问题的解决方案似乎是：
-
设置控件样式，使其位于按钮后面。您在问题中提到了这一点，但 Romas 在这里提供的答案 In javascript can I make a "click" event fire programmatically for a file input element? 确实有效（我在 IE9、Chrome v23 和 FF v15 中尝试过）。
使用基于 Flash 的方法（GMail 就是这样做的）。我试用了Uploadify 演示，它似乎工作得很好。
样式化文件上传：
http://www.quirksmode.org/dom/inputfile.html
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
参考资料：
jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?
IE9 file input triggering using Javascript
getting access is denied error on IE8
【讨论】：
完美答案为尼克喝彩。我们最终使用带有 HTTP 处理程序的FineUploader；使用更多样板代码实现大致相同的解决方案。 奇怪，这个jsfiddle似乎证明了这个答案是错误的：jsfiddle.net/NkycS/27文件输入点击是通过JS触发的，提交也是如此，它在IE9中有效。不知道我是否遗漏了什么。 是的，我遗漏了一些东西：我的文件输入没有名称属性。只要我添加一个，我就会收到拒绝访问错误。 jsfiddle.net/NkycS/32【参考方案2】：嘿，这个解决方案有效。 对于下载，我们应该使用 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();
);
;
【讨论】：
【参考方案3】：这个解决方案看起来可能会奏效。您必须将其包装在 <form> 中并将其发布到 jquery 更改处理程序中，并可能使用 __eventtarget 或 iframe 或 Web 表单使用的任何内容在 form_load 中处理它，但它允许您选择一个文件，并通过提交表单，它应该发送它。但是我无法测试它，因为我家里没有设置环境。
http://jsfiddle.net/axpLc/1/
<a onclick="$('#inputFile').click();">
Change profile picture
</a>
<div id='divHide'>
<input id='inputFile' type='file' />
</div>
$('#inputFile').change(function() alert('ran'); );
#divHide display:none;
【讨论】：
【参考方案4】：好吧，就像 SLC 所说，您应该使用 <Form> 标签。
首先你应该指出文件的数量；这应该由您的输入字段确定。第二步是将它们堆叠成一个数组。
<input type="file" class="upload" name="fileX[]"/>
然后创建一个循环；通过循环，它将根据当前所在的输入字段自动确定。
$("input[@type=file]:nth(" + n +")")
然后你会注意到选择的每个文件；将输入名称替换为文件名。这应该是通过 jQuery 提交多个文件的非常非常基本的方式。
如果您想要一件商品：
$("input[@type=file]").change(function()
doIt(this, fileMax);
);
这应该在找到最大文件的地方创建一个 Div；并附加到onEvent。上面的相关代码也需要这些：
var fileMax = 3;
<input type="file" class="upload" name="fileX[]" />
这应该导航 DOM 父树；然后分别创建字段。这是一种方式；另一种方式是您在上面看到的 SLC 方式。有很多方法可以做到这一点；只是你想要操纵多少 jQuery？
希望对您有所帮助；对不起，如果我误解了你的问题。
【讨论】：
以上是关于从 onchange 触发 .click() 时 IE9 上出现“SCRIPT5 访问被拒绝”错误的主要内容，如果未能解决你的问题，请参考以下文章
以编程方式更改值时触发Dojo Select onChange事件触发