ie javascript form invia con input file

Question

Ho un modulo html, con un campo di caricamento file personalizzato. E con ciò intendo che ho spostato il campo file effettivo oltre i bordi della pagina con css, che ho un campo di input personalizzato e un pulsante in posizione, e che ho un evento click jquery collegato a quel pulsante personalizzato per attivare il finestra di immissione dei file. Funziona tutto bene, in ogni browser.

Ma devo inviare il modulo tramite javascript. E ho ottenuto da qualche parte che IE ricorda le mie azioni con javascript come una manipolazione dannosa del campo di input del file e blocca il mio accesso con un errore "access denied" quando invoco document.formName.submit().

C'è un modo per aggirare questo, perché sono diventato completamente arrabbiato cercando di cercare una soluzione. Ho seriamente non voglio usare il campo di input file di default, come ogni browser rende diverso e scombina il mio progetto ..

codice:

<form name="thisForm" onsubmit="return false;" enctype="multipart/form-data" method="post" action="index.cfm/somepage"> 
    <input type="file" class="hidden" name="hidden" id="hidden" /> 
    <input type="text" name="shown" id="shown" /> 
    <button id="button">browse..</button> 
    <input type="submit" id="submitForm" /> 
</form> 

<script> 
    $('button').click(function(){ 
     $('#shown').val($('#hidden').val()); 
    }); 

    $('submitForm').click(function(){ 
     validateForm(); 
    }); 

    function validateForm() 
    { 
     //regular expression validation against all other input fields in the form 
     //not the file input field 

     validateVAT(); 
    } 

    function validateVAT() 
    { 
     //connect to external service to check VAT 

     submitForm(); 
    } 

    function submitForm() 
    { 
     document.thisForm.submit(); 
    } 
</script> 

UPDATE: Ho appena cercato di prima caricare il file, prima di inviare il modulo, tramite ajax, ma anche mi ha dato l'accesso negato errore ..> _>

Answer 1

Ho trovato la risposta da solo, dopo 2 giorni di errore pazzesco &. Spero di poter aiutare qualcuno con questo ..

Ho rimosso il campo di input del file nascosto dalla mia pagina coldfusion e l'ho sostituito con un tag iframe. Quel tag iframe è stato collegato a un'altra pagina coldfusion, contenente un altro modulo con il campo di input del file rimosso. Ora quando uso javascript per fare clic sul campo di input del file, che è ancora nascosto dalla vista, dà comunque la finestra di dialogo del file di ricerca senza intoppi. Ma quando uso javascript per inviare il modulo, attraverso l'iframe, miracolosamente, invia il modulo nell'iframe, rendendo possibile caricare il file in uno script serveride di tua preferenza.

codice iframe:

<form id="formFileUpload" class="formFileUpload" name="formFileUpload" method="post" action="../actions/act_upload_file.cfm" autocomplete="off" enctype="multipart/form-data"> 
    <input type="file" class="buttonFileHidden" id="inputFile" name="partnersLogo" /> 
</form> 

iframe stesso:

<iframe src="admin/dsp_file_upload.cfm" id="ifu" name="ifu" class="buttonFileHidden"> 
</iframe> 

javascript click & conferma:

ifu.document.formFileUpload.partnersLogo.click(); 
ifu.document.formFileUpload.submit(); 

Answer 2

hai provato

$('button').click(function(){ 
     $('form[name=thisForm]').submit() 
    }); 

Answer 3

È necessario modificare onsumbit='return false;' a onsubmit='return validateForm()'.

Quindi avere validateForm() restituisce true se il modulo supera i controlli di convalida o false se non lo è.

Il onsubmit='return false' impedisce al modulo di inoltrare tramite document.thisForm.submit(); e quando l'utente fa clic sul pulsante di invio.

Answer 4

ho commentato queste righe nel query.form.js j allora ogni cosa funziona bene per me Non chiedermi il motivo, anche se non ho la soluzione per questo, ma funziona di sicuro.

 if (io.contentWindow.document.execCommand) { 
      try { // #214 
       io.contentWindow.document.execCommand('Stop'); 
     } catch(ignore) {} 
     } 

Answer 5

ho avuto lo stesso problema e ho risolto utilizzando un stile <label> tag con una leggera soluzione in Firefox.

http://jsfiddle.net/djibouti33/uP7A9/

Gli Obiettivi:

1. permette all'utente di caricare un file utilizzando il controllo di input di file HTML standard
2. nascondere controllo di input di file HTML standard e applicare proprio styling
3. dopo l'utente seleziona il file da caricare, invia automaticamente il modulo

I Navigatori:

• Firefox, Chrome, IE8/9, Safari
• IE7 non ha funzionato, ma potrebbe se si aggiunge alla soluzione descritto di seguito.

soluzione iniziale:

1. Nascondi l'input file posizionandolo fuori campo. Importante da non mostrare: nessuno come ad alcuni browser non piacerà.
2. Aggiungi un altro elemento in stile alla pagina (link, pulsante).
3. Ascoltare per un clic su questo elemento, poi di programmazione inviare un clic per il file di input per innescare il nativo 'file explorer'
4. Listen per l'evento onchange del file di input (si verifica dopo un utente sceglie il file)
5. inviare il modulo

il problema:

1. IE: se a livello di codice invia un click ad un ingresso di file in modo da attivarlo (2), pr ogrammatically l'invio del modulo (5) lancerà un errore di sicurezza

La soluzione Soluzione:

1. Idem come sopra
2. Approfittate delle caratteristiche di accessibilità costruito in al tag etichetta (cliccando su un'etichetta attiverà il controllo associato) con uno etichetta etichetta invece di un collegamento/pulsante
3. Ascolta per l'evento onchange dell'ingresso file
4. Invia il modulo
5. Per qualche motivo i browser Mozilla non attivano l'immissione di un file facendo clic sulla relativa etichetta.
6. Per Mozilla, ascoltare il clic sull'etichetta e inviare un evento click sull'input del file per attivarlo.

Spero che questo aiuti! Dai un'occhiata al jsfiddle per i dettagli su html/js/css usati per far funzionare tutto.

Answer 6

Se sei come me, e non vuoi usare un iframe, e non eri troppo entusiasta della soluzione dell'etichetta menzionata sopra, puoi semplicemente posizionare il pulsante originale sopra il pulsante con una opacità 0.

Utilizzando l'esempio precedente, si avrebbe ancora:

<input type="file" class="hidden" name="hidden" id="hidden" /> 
<input type="button" name="shown" id="shown" value="Add File" /> 

Ma .hidden sarebbe definito in questo modo:

.hidden { 
    position: absolute; 
    left: -150px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

Config: imposta l'opacità su 0,5 (o = 50) per vedere l'elemento trasparente e modificare il posizionamento sinistro.

Probabilmente altrettanto hacky come le risposte di cui sopra, ma una soluzione di bootstrap-friendly, e nel mio caso, l'unico che ha funzionato.

Answer 7

Ho trovato una soluzione strana per risolvere questo problema.

Ha pensato al thread di click di js. Se esce da questo thread, non ci sono più problemi di sicurezza.

Ho scelto di usare window.setTimeout. vedi esempio qui sotto:

<script type="text/javascript"> 

    $(function() { 
     $("#<%= this.fuDoc.ClientID %>").bind('change', uploadFile); 
     $("#<%= this.btnUpload.ClientID %>").click(chooseFile); 
    }); 

    function chooseFile() { 
     $("#<%= this.fuDoc.ClientID %>").click(); 
    } 

    function uploadFile() { 
     var fu = $("#<%= this.fuDoc.ClientID %>"); 
     if (fu.val() != "") { 
      window.setTimeout(function() { 
       <%= this.ClientScript.GetPostBackEventReference(this.btnUpload, "") %>; 
      }, 100); 
     } 
    } 

</script> 

<asp:FileUpload ID="fuDoc" runat="server" style="display: none;" /> 

<asp:Button runat="server" ID="btnUpload" Text="upload" OnClick="btnUpload_Click" /> 

<asp:Label ID="lbltext" Text="" runat="server" />` 

poi, niente più accesso negato!

Answer 8

Questo è un vecchio post ma il problema sorge ancora. Questo potrebbe non funzionare perché jQuery gentilmente fallisce silenziosamente. Stavo avendo questo problema e mi chiedevo perché il mio modulo nascosto non sarebbe stato inviato e il file sarebbe stato caricato. Ho iniziato usando jQuery, ma poi sono andato alla vaniglia. Non funzionava ancora, ma sembrava che fosse stata lanciata un'eccezione nella mia funzione .click().

Esecuzione

try { 
    document.getElementById('formid').submit(); 
} catch (e) { 
    alert(e); 
} 

ha mostrato che siamo effettivamente stati gettando un errore, e la ricerca rapida ha mostrato che questo era perché IE NON SUPPORTA CLICKS SIMULATI su un ingresso FILE. Ciò significa che quando il modulo è andato a essere pubblicato, IE sarebbe rifiutare di inviare il modulo di

Excuse i tappi in grassetto, ma so che molte persone vedranno il testo e lo legge