從onchange觸發.click（）時，IE9上出現“ SCRIPT5訪問被拒絕”錯誤

Question

我們希望減少用戶在我們的網站上上傳文件所需的步驟； 因此，我們使用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用戶提供一個按鈕？

Answer 1

出於安全原因，您嘗試執行的操作是不可能的。 似乎是IE9不允許您以這種方式提交表單，除非它是實際單擊鼠標觸發它的文件上載控件。

出於參數的考慮，我能夠使用您的代碼在change處理程序中進行提交，但是僅當我自己單擊“ Browse按鈕時，該方法才有效 。 我什至在$(document).ready方法中為change處理程序設置的變量設置了輪詢，該變量指示應觸發提交-這也不起作用。

該問題的解決方案似乎是：

1. 設置控件的樣式，使其位於按鈕后面。 您在問題中提到了這一點，但是Romas在此處提供的答案在JavaScript中，我可以以編程方式為文件輸入元素觸發“ click”事件嗎？ 確實可以工作（我在IE9，Chrome v23和FF v15中嘗試過）。
2. 使用基於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：模擬<input type =“ file” />的單擊在Firefox中不起作用？

使用Javascript觸發IE9文件輸入

在IE8上獲取訪問被拒絕錯誤

Answer 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();      
       }
   });
};

Answer 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; }

Answer 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？

希望能有所幫助； 對不起，如果我誤解了您的問題。