ie javascript form submit con entrada de archivo

Question

Tengo un formulario html, con un campo de carga de archivo personalizado. Y con eso quiero decir que he movido el campo de archivo real más allá de los bordes de la página con css, que tengo un campo de entrada personalizado y un botón en su lugar, y que tengo un evento de clic de jquery adjunto a ese botón personalizado para activar el cuadro de diálogo de entrada de archivo. Todo funciona bien, en todos los navegadores.

Pero necesito enviar el formulario a través de javascript. Y llegué a algún lugar en el que IE recuerda mis acciones con javascript como una manipulación maliciosa del campo de entrada de archivo y bloquea mi acceso con un error "access denied" cuando invoco document.formName.submit().

Hay una forma de evitar esto, porque me he enloquecido al tratar de buscar una solución. En serio, no quiero utilizar el campo de entrada de archivos por defecto, ya que cada navegadores hace que sea diferente y desordena mi diseño ..

código:

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

ACTUALIZACIÓN: Sólo traté de primera cargar el archivo, antes de enviar el formulario, a través de ajax, pero que también me dio el acceso denegado error ..> _>

Answer 1

Encontré la respuesta yo mismo, después de 2 días de prueba loca & error. Espero poder ayudar a alguien con esto ...

Quité el campo de entrada del archivo oculto de mi página de coldfusion y lo reemplacé por una etiqueta iframe. Esa etiqueta de iframe vinculada a otra página de ColdFusion, que contiene otro formulario con el campo de entrada de archivo eliminado. Ahora, cuando uso javascript para hacer clic en el campo de entrada del archivo, que todavía está oculto a la vista, todavía da el diálogo de archivo de exploración sin problemas. Pero cuando uso javascript para enviar el formulario, a través del iframe, milagrosamente, envía el formulario en el iframe, lo que permite cargar el archivo en algunas secuencias de comandos en el servidor de su preferencia.

código 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> 

marco flotante en sí:

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

Javascript clic & presentar:

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

Answer 2

Ha intentado

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

Answer 3

Necesita cambiar onsumbit='return false;' a onsubmit='return validateForm()'.

Luego haga que validateForm() devuelva verdadero si el formulario pasa las comprobaciones de validación, o falso si no lo hace.

El onsubmit='return false' impide que el formulario se envíe a través de document.thisForm.submit(); y cuando el usuario hace clic en el botón Enviar.

Answer 4

comenté estas líneas en query.form.js j entonces cada cosa funciona bien para mí No me preguntes la razón, incluso yo no tengo la solución para eso, pero funciona con seguridad.

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

Answer 5

que estaba teniendo el mismo problema, y ​​lo resolví mediante el uso de una etiqueta de estilo <label> con una ligera solución en Firefox.

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

Los Objetivos:

1. permite al usuario cargar un archivo mediante el control de entrada de archivo HTML estándar
2. ocultar el control de entrada de archivo HTML estándar y aplicar estilo propio
3. después el usuario selecciona el archivo para cargar, envía automáticamente el formulario

Los Navegadores:

• Firefox, Chrome, Internet Explorer 8/9, Safari
• Internet Explorer 7 no funciona, pero puede ser que si lo añade a la solución se detalla a continuación.

la solución inicial:

1. Ocultar el archivo de entrada colocándolo fuera de la pantalla. Importante no mostrar: ninguno ya que a algunos navegadores no les gustará esto.
2. Agregue otro elemento de estilo a la página (enlace, botón).
3. escuche por un clic en ese elemento, a continuación, enviar mediante programación un clic para el archivo de entrada para activar el 'explorador de archivos' nativo
4. Escuchar para el evento onchange del archivo de entrada (se produce cuando un usuario elige su archivo)
5. enviar el formulario

el problema:

1. IE: si se envía mediante programación un clic a un archivo de entrada con el fin de activarlo (2), pr la presentación de ogrammatically la forma (5) lanzará un error de seguridad

La Solución Solución:

1. Igual que el anterior
2. Tome ventaja de las características de accesibilidad integradas en la etiqueta de la etiqueta (clic en una etiqueta se activará su control asociado) al diseñar una etiqueta en lugar de un enlace/botón
3. Escuchar el evento de cambio de entrada de archivo
4. Envíe el formulario
5. Por alguna razón, los navegadores Mozilla no activarán una entrada de archivo haciendo clic en su etiqueta.
6. Para Mozilla, escuche el clic en la etiqueta y envíe un evento de clic a la entrada del archivo para activarlo.

Hope this helps! Consulte el jsfiddle para obtener más información sobre html/js/css utilizado para que todo funcione.

Answer 6

Si es como yo, y no desea utilizar un iframe, y no estaba muy interesado en la solución de etiqueta mencionada anteriormente, puede simplemente colocar el botón original sobre el botón de estilo con una opacidad de 0.

Utilizando el ejemplo anterior, a pesar de ello tiene:

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

Pero .hidden se definiría así:

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

Config: configure la opacidad a 0.5 (o = 50) para ver el elemento transparente y ajustar el posicionamiento izquierdo.

Posiblemente tan hacky como las respuestas anteriores, pero una solución de arranque y, en mi caso, la única que funcionó.

Answer 7

Encontré una solución extraña para resolver este problema.

Pensó en el hilo de clic de js. Si sale de este hilo, no hay más problemas de seguridad.

Elegí usar window.setTimeout. vea el ejemplo a continuación:

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

entonces, sin más acceso denegado!

Answer 8

Esta es una publicación anterior, pero el problema aún surge. Es posible que esto no funcione porque jQuery amablemente falla silenciosamente. Estaba teniendo este problema y me preguntaba por qué mi formulario oculto no se enviaba y el archivo se cargaba. Empecé usando jQuery, pero luego me fui a vainilla. Todavía no funcionaba pero parecía que se estaba lanzando una excepción en mi función .click().

Correr

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

mostraron que de hecho estábamos echando un error, y la investigación rápida demostró que esto era debido a IE no soporta CLICS simulados en un archivo de entrada. Esto significa que cuando la forma fue a ser publicado, IE podría denegar la publicación, la forma

excusa las tapas en negrilla, pero sé que mucha gente va a ver el texto y lo lee