javascript 从 onchange 触发 .click() 时，IE9 上出现“SCRIPT5 访问被拒绝”错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13290421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"SCRIPT5 Access is denied" error on IE9 when firing .click() from onchange
提问by Luke Merrett
We want to reduce the number of steps it takes for a user to upload a file on our website; so we're using jQuery to open and postback files using the below markup (simplified):
我们希望减少用户在我们网站上上传文件所需的步骤；所以我们使用 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" />
This works absolutely fine in Firefox and Chrome; opening the file dialog when the link is clicked and firing the postback when a file is selected.
这在 Firefox 和 Chrome 中非常有效；单击链接时打开文件对话框，并在选择文件时触发回发。
However in IE9 after the file upload has loaded and a user has selected a file; insteaed of the OnChange working I get a "SCRIPT5 Access is denied" error. I've tried setting an arbitrary timeout, setting intervals to check if a file is given to no avail.
但是在 IE9 中加载文件上传后用户选择了一个文件；代替 OnChange 工作，我收到“SCRIPT5 访问被拒绝”错误。我试过设置任意超时，设置间隔来检查文件是否无效。
There are a number of other questions relating to this; however none appear to have a decent answer (One said set the file dialog to be transparent and hover behind a button!)
还有一些与此相关的其他问题；但是似乎没有一个像样的答案（有人说将文件对话框设置为透明并悬停在按钮后面！）
Has anyone else resolved this? Or is it absolutely necessary that I provide a button for IE users?
有没有其他人解决过这个问题？或者我是否绝对有必要为 IE 用户提供一个按钮？
回答by nick_w
For security reasons, what you are trying to do is not possible. It seems to be the IE9 will not let you submit a form in this way unless it was an actual mouse click on the File Upload control that triggers it.
出于安全原因，您尝试执行的操作是不可能的。似乎 IE9 不会让您以这种方式提交表单，除非是在触发它的文件上传控件上实际单击鼠标。
For arguments sake, I was able to use your code to do the submit in the changehandler, but it worked onlywhen I clicked the Browsebutton myself. I even set up polling in the $(document).readymethod for a variable set by the changehandler that indicates a submission should be triggered - this didn't work either.
为了论证起见，我可以使用您的代码在change处理程序中进行提交，但只有当我Browse自己单击按钮时它才起作用。我什至在$(document).ready方法中为change处理程序设置的变量设置了轮询，该变量指示应触发提交 - 这也不起作用。
The solutions to this problem appear to be:
这个问题的解决方案似乎是：
- Styling the control in such a way that it sits behind a button. You mentioned this in your question, but the answer provided by Romas here In JavaScript can I make a "click" event fire programmatically for a file input element?does in fact work (I tried in IE9, Chrome v23 and FF v15).
- Using a Flash-based approach (GMail does this). I tried out the Uploadifydemo and it seems to work quite nicely.
- 将控件的样式设置为位于按钮后面。您在问题中提到了这一点，但 Romas 在这里提供的答案在 JavaScript 中，我可以以编程方式为文件输入元素触发“点击”事件吗？确实有效（我在 IE9、Chrome v23 和 FF v15 中尝试过）。
- 使用基于 Flash 的方法（GMail 这样做）。我尝试了Uploadify演示，它似乎工作得很好。
Styling a File Upload:
样式文件上传：
http://www.quirksmode.org/dom/inputfile.html
http://www.quirksmode.org/dom/inputfile.html
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
References:
参考：
jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?
jQuery：模拟点击 <input type="file" /> 在 Firefox 中不起作用？
IE9 file input triggering using Javascript
回答by Shankar Shastri
Hey this solution works. for download we should be using MSBLOB
嘿，这个解决方案有效。对于下载，我们应该使用 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();
}
});
};
回答by NibblyPig
This solution looks like it might work. You'll have to wrap it in a <form>and get it to post in the jquery change handler, and probably handle it in form_load using the __eventtarget or and iframe or whatever it is that web forms uses, but it allows you to select a file, and by submitting the form, it should send it. I can't test it however, since I don't have an environment set up at home.
此解决方案看起来可能有效。您必须将它包装在 a 中<form>并让它在 jquery 更改处理程序中发布，并且可能使用 __eventtarget 或 iframe 或 Web 表单使用的任何内容在 form_load 中处理它，但它允许您选择一个文件，并通过提交表单，它应该发送它。但是，我无法对其进行测试，因为我在家中没有设置环境。
<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; }
回答by Greg
Well, like SLC stated you should utilize the <Form>tag.
好吧，就像 SLC 所说的那样，您应该使用<Form>标签。
First you should indicate the amount of files; which should be determined by your input fields. The second step will be to stack them into an array.
首先你应该指明文件的数量；这应该由您的输入字段确定。第二步是将它们堆叠成一个数组。
<input type="file" class="upload" name="fileX[]"/>
Then create a loop; by looping it will automatically be determined based on the input field it's currently on.
然后创建一个循环；通过循环，它将根据当前所在的输入字段自动确定。
$("input[@type=file]:nth(" + n +")")
Then you'll notice that each file chosen; will replace the input name to the file-name. That should be a very, very basic way to submit multiple files through jQuery.
然后你会注意到每个文件都被选中；将输入名称替换为文件名。这应该是通过 jQuery 提交多个文件的一种非常非常基本的方式。
If you'd like a single item:
如果您想要单品：
$("input[@type=file]").change(function(){
doIt(this, fileMax);
});
That should create a Div where the maximum file found; and attaches to the onEvent. The correlating code above would need these also:
这应该创建一个 Div，在其中找到最大文件；并附加到onEvent. 上面的相关代码也需要这些：
var fileMax = 3;
<input type="file" class="upload" name="fileX[]" />
This should navigate the DOM parent tree; then create the fields respectively. That is one way; the other way is the one you see above with SLC. There are quite a few ways to do it; it's just how much of jQuery do you want manipulating it?
这应该导航 DOM 父树；然后分别创建字段。那是一种方式；另一种方式是您在上面看到的 SLC 方式。有很多方法可以做到；这只是您想要操作多少 jQuery？
Hopefully that helps; sorry if I misunderstood your question.
希望这有帮助；对不起，如果我误解了你的问题。
