Fehler "SCRIPT5 Zugriff verweigert" auf IE9 beim Auslösen von .click() von onchange

Question

Wir möchten die Anzahl der Schritte reduzieren, die ein Benutzer benötigt, um eine Datei auf unsere Website hochzuladen; so dass wir mit jQuery öffnen und Postback-Dateien, die unter Verwendung von Markup (vereinfacht):

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

Dies funktioniert absolut in Ordnung in Firefox und Chrome; Öffnen des Dateidialogs, wenn auf die Verknüpfung geklickt wird, und Starten des Postbacks, wenn eine Datei ausgewählt wird.

Allerdings in IE9, nachdem der Datei-Upload geladen wurde und ein Benutzer eine Datei ausgewählt hat; Als OnChange funktioniert, bekomme ich den Fehler "SCRIPT5 Access is denied". Ich habe versucht, eine willkürliche Zeitüberschreitung einzustellen, indem ich Intervalle einstelle, um zu überprüfen, ob eine Datei vergebens vergeben wird.

Es gibt eine Reihe anderer Fragen dazu; aber keine scheint eine anständige Antwort zu haben (Eins sagte, dass der Dateidialog transparent sein sollte und hinter einer Taste schweben!)

Hat jemand anderes das gelöst? Oder ist es absolut notwendig, dass ich eine Schaltfläche für IE-Benutzer zur Verfügung stelle?

Answer 1

Aus Sicherheitsgründen ist das, was Sie versuchen, nicht möglich.Es scheint, dass der IE9 es nicht erlaubt, ein Formular auf diese Weise zu senden, es sei denn, es war ein tatsächlicher Mausklick auf das Steuerelement zum Hochladen von Dateien, das es auslöst.

Für Argumente willen, ich war in der Lage, Ihren Code zu verwenden, um übermittelt die in den change Handler, aber es funktionierte nur wenn ich mich die Browse Schaltfläche geklickt. Ich habe sogar eine Abfrage in der $(document).ready Methode für eine Variable eingerichtet, die durch den Handler festgelegt wurde, der anzeigt, dass eine Übermittlung ausgelöst werden sollte - das hat auch nicht funktioniert.

Die Lösungen für dieses Problem zu sein scheinen:

1. Styling die Steuerung in einer solchen Art und Weise, dass es hinter einem Button sitzt. Du hast das in deiner Frage erwähnt, aber die Antwort, die Romas hier liefert, ist In JavaScript can I make a "click" event fire programmatically for a file input element? (ich habe es in IE9, Chrome v23 und FF v15 versucht).
2. Verwendung eines Flash-basierten Ansatzes (Gmail tut dies). Ich habe die Uploadify Demo ausprobiert und es scheint ganz gut zu funktionieren.

Styling eine Datei-Upload:

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

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

Referenzen:

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

Diese Lösung sieht so aus, als könnte es funktionieren. Sie müssen es in eine <form> umbrechen und es in den jquery change-Handler schreiben lassen, und wahrscheinlich handhaben Sie es in form_load mit dem __eventtarget oder und iframe oder was auch immer es Web-Forms verwendet, aber es erlaubt Ihnen, eine Datei auszuwählen und mit dem Absenden des Formulars, sollte es senden. Ich kann es jedoch nicht testen, da ich zu Hause keine Umgebung eingerichtet habe.

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

Nun, wie SLC angegeben Sie die <Form> Tag nutzen sollten.

Zuerst sollten Sie die Anzahl der Dateien angeben; welches sollte durch Ihre Eingabefelder bestimmt werden. Der zweite Schritt besteht darin, sie in ein Array zu stapeln.

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

Dann erstellen Sie eine Schleife; durch Schleifen wird es automatisch basierend auf dem Eingabefeld bestimmt, in dem es sich gerade befindet.

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

Dann werden Sie feststellen, dass jede Datei ausgewählt ist; ersetzt den eingegebenen Namen durch den Dateinamen. Das sollte eine sehr, sehr einfache Möglichkeit sein, mehrere Dateien über jQuery zu übermitteln.

Wenn Sie ein einzelnes Element mögen:

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

, dass ein Div schaffen sollte, wo die maximale Datei gefunden; und hängt an die onEvent. Der obige Korrelationscode würde auch diese benötigen:

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

Dies sollte durch den übergeordneten DOM-Baum navigieren; dann erstellen Sie die Felder jeweils. Das ist ein Weg; Der andere Weg ist der, den Sie oben bei SLC sehen. Es gibt viele Möglichkeiten, dies zu tun. Wie viel von jQuery soll es manipulieren?

Hoffentlich hilft das; Entschuldigung, wenn ich deine Frage missverstanden habe.

Answer 4

Hey diese Lösung funktioniert. zum Download sollten wir 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();  
     } 
    }); 
};