Lỗi "Truy cập SCRIPT5 bị từ chối" trên IE9 khi kích hoạt .click() từ onchange

Question

Chúng tôi muốn giảm số bước cần thiết để người dùng tải lên tệp trên trang web của chúng tôi; vì vậy chúng tôi đang sử dụng jQuery để mở và đăng lại các tệp bằng cách sử dụng đánh dấu bên dưới (đã đơn giản hóa):

<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" /> 

Điều này hoàn toàn tốt trong Firefox và Chrome; mở hộp thoại tệp khi liên kết được nhấp và kích hoạt đăng lại khi tệp được chọn.

Tuy nhiên trong IE9 sau khi tải lên tệp đã tải và người dùng đã chọn tệp; insteaed của OnChange làm việc tôi nhận được một "SCRIPT5 Access bị từ chối" lỗi. Tôi đã thử đặt thời gian chờ tùy ý, thiết lập khoảng thời gian để kiểm tra xem tệp có được cung cấp không có lịch phát sóng hay không.

Có một số câu hỏi khác liên quan đến vấn đề này; tuy nhiên không ai có câu trả lời hợp lý (Một người nói đặt hộp thoại tệp thành trong suốt và di chuột sau một nút!)

Có ai khác giải quyết vấn đề này không? Hoặc là nó hoàn toàn cần thiết mà tôi cung cấp một nút cho người dùng IE?

Answer 1

Vì lý do bảo mật, những gì bạn đang cố gắng làm là không thể.Có vẻ như IE9 sẽ không cho phép bạn gửi biểu mẫu theo cách này trừ khi đó là một nhấp chuột thực sự trên điều khiển Tải lên tệp kích hoạt nó.

Đối với lập luận sake, tôi đã có thể sử dụng mã của bạn để thực hiện nộp trong xử lý change, nhưng nó làm việc chỉ khi tôi nhấp vào nút Browse bản thân mình. Tôi thậm chí còn thiết lập bỏ phiếu trong phương thức $(document).ready cho một tập hợp biến bởi trình xử lý change cho biết việc gửi phải được kích hoạt - điều này cũng không hoạt động.

Các giải pháp cho vấn đề này dường như là:

1. Tạo kiểu điều khiển theo một cách như vậy mà nó ngồi đằng sau một nút. Bạn đã đề cập điều này trong câu hỏi của bạn, nhưng câu trả lời được cung cấp bởi Romas ở đây In JavaScript can I make a "click" event fire programmatically for a file input element? hiện trong công việc thực tế (tôi đã thử trong IE9, Chrome v23 và FF v15).
2. Sử dụng phương pháp dựa trên Flash (GMail thực hiện việc này). Tôi đã thử bản demo Uploadify và có vẻ như hoạt động khá độc đáo.

Tạo kiểu một File Upload:

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Tài liệu tham khảo:

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

Answer 2

Giải pháp này có vẻ như nó có thể hoạt động. Bạn sẽ phải bọc nó trong một <form> và làm cho nó đăng trong trình xử lý thay đổi jquery, và có thể xử lý nó trong form_load bằng cách sử dụng __eventtarget hoặc iframe hoặc bất kỳ biểu mẫu web nào sử dụng, nhưng nó cho phép bạn chọn một tệp và bằng cách gửi biểu mẫu, nó sẽ gửi nó. Tuy nhiên, tôi không thể kiểm tra vì tôi không có môi trường ở nhà.

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 3

Vâng, như SLC nói bạn nên sử dụng các thẻ <Form>.

Trước tiên, bạn nên chỉ ra số lượng tệp; cần được xác định bởi các trường nhập của bạn. Bước thứ hai sẽ là xếp chúng vào một mảng.

<input type="file" class="upload" name="fileX[]"/> 

Sau đó tạo vòng lặp; bằng cách lặp lại, nó sẽ tự động được xác định dựa trên trường nhập hiện tại.

$("input[@type=file]:nth(" + n +")") 

Sau đó, bạn sẽ nhận thấy rằng mỗi tệp được chọn; sẽ thay thế tên đầu vào thành tên tệp. Đó là một cách rất cơ bản để gửi nhiều tệp thông qua jQuery.

Nếu bạn muốn một mục duy nhất:

$("input[@type=file]").change(function(){ 
    doIt(this, fileMax); 
}); 

Điều đó sẽ tạo ra một Div mà tập tin tối đa tìm thấy; và gắn vào onEvent. Mã tương ứng ở trên cũng sẽ cần những mã này:

var fileMax = 3; 
<input type="file" class="upload" name="fileX[]" /> 

Điều này sẽ điều hướng cây cha DOM; sau đó tạo các trường tương ứng. Đó là một cách; cách khác là cách bạn nhìn thấy ở trên với SLC. Có một vài cách để làm điều đó; nó chỉ là bao nhiêu jQuery bạn muốn thao tác nó?

Hy vọng điều đó sẽ hữu ích; xin lỗi nếu tôi hiểu lầm câu hỏi của bạn.

Answer 4

Giải pháp này hoạt động. để tải về chúng ta nên sử dụng 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();  
     } 
    }); 
};