Errore "SCRIPT5 Accesso negato" su IE9 durante l'attivazione di .click() da onchange

Question

Vogliamo ridurre il numero di passaggi necessari affinché un utente carichi un file sul nostro sito Web; quindi stiamo utilizzando jQuery per aprire e file di postback utilizzando il markup di seguito (semplificato):

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

Questo funziona assolutamente bene in Firefox e Chrome; aprire la finestra di dialogo del file quando si fa clic sul collegamento e attivare il postback quando viene selezionato un file.

Tuttavia in IE9 dopo che il caricamento del file è stato caricato e un utente ha selezionato un file; in seguito all'attivazione di OnChange, viene visualizzato un errore "SCRIPT5 Access is negato". Ho provato a impostare un timeout arbitrario, impostando gli intervalli per verificare se un file è stato dato inutilmente.

Ci sono una serie di altre domande relative a questo; tuttavia nessuno sembra avere una risposta decente (uno ha detto che la finestra di dialogo dei file è trasparente e passa con il mouse su un pulsante!)

Qualcun altro ha risolto questo? O è assolutamente necessario fornire un pulsante per gli utenti di IE?

Answer 1

Per motivi di sicurezza, ciò che si sta tentando di fare non è possibile.Sembra che l'IE9 non ti consenta di inviare un modulo in questo modo a meno che non sia stato un vero clic del mouse sul controllo Caricamento file che lo attiva.

Per amor di argomenti, sono stato in grado di utilizzare il codice per fare il submit nel gestore change, ma ha funzionato solo quando ho cliccato il pulsante Browse me stesso. Ho persino impostato il polling nel metodo $(document).ready per una variabile impostata dal gestore change che indica che l'invio deve essere attivato, anche questo non ha funzionato.

Le soluzioni a questo problema sembrano essere:

1. styling il controllo in modo tale che si siede dietro un pulsante. Hai menzionato questo nella tua domanda, ma la risposta fornita da Romas qui In JavaScript can I make a "click" event fire programmatically for a file input element? funziona di fatto (ho provato in IE9, Chrome v23 e FF v15).
2. Utilizzo di un approccio basato su Flash (GMail lo fa). Ho provato la demo Uploadify e sembra funzionare abbastanza bene.

Styling un file di caricamento:

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

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

Riferimenti:

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

Questa soluzione sembra funzionare. Dovrai avvolgerlo in un <form> e farlo pubblicare nel gestore di modifiche jquery e probabilmente gestirlo in form_load usando __eventtarget o iframe o qualsiasi altra cosa usi i moduli web, ma ti permette di selezionare un file e inviando il modulo, dovrebbe inviarlo. Non posso testarlo comunque, dal momento che non ho un ambiente impostato a casa.

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

Beh, come SLC dichiarato si dovrebbe utilizzare il tag <Form>.

Per prima cosa è necessario indicare la quantità di file; che dovrebbe essere determinato dai campi di input. Il secondo passo sarà quello di impilarli in un array.

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

Quindi creare un ciclo; eseguendo il ciclo verrà determinato automaticamente in base al campo di input attualmente attivo.

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

Quindi noterete che ogni file scelto; sostituirà il nome di input con il nome del file. Questo dovrebbe essere un modo molto, molto semplice per inviare più file tramite jQuery.

Se vuoi un singolo elemento:

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

Questo dovrebbe creare un div in cui il file massima trovato; e si collega allo onEvent. Il codice correlato sopra avrebbe bisogno anche di questi:

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

Questo dovrebbe navigare nell'albero padre DOM; quindi crea i campi rispettivamente. Questo è un modo; l'altro modo è quello che vedi sopra con SLC. Ci sono diversi modi per farlo; è solo la quantità di jQuery che vuoi manipolare?

Speriamo che questo aiuti; scusa se ho frainteso la tua domanda.

Answer 4

Ehi, questa soluzione funziona. per il download dovremmo utilizzare 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();  
     } 
    }); 
};