¿Cómo envío automáticamente un formulario de carga cuando se selecciona un archivo?

154

Tengo un formulario de carga de archivos simple. ¿Cómo hago que se envíe automáticamente cuando se ha seleccionado un archivo? No quiero que el usuario tenga que hacer clic en el botón Enviar.

javascript html

— ram1
fuente

9

¿Qué pasa si el usuario selecciona el archivo incorrecto? OMI, debe dejar que el usuario elija cuándo enviar.

— Tyler Crompton

2

@Tyler La mayoría de la gente seleccionará el archivo correcto y estoy tratando de reducir la fricción UX. Para aquellas personas que seleccionan el archivo incorrecto, después de que se haya cargado, pueden elegir eliminarlo.

— ram1

3

"la mayoría de las personas" toman decisiones inteligentes, pero la mayoría de las personas no lo son.

— Phix

2

Estoy de acuerdo con @TylerCrompton, los usuarios cometerán los errores más tontos y te culparán por ello, puedes agregar un deshacer después del envío.

— Ross Keddy

3

la mejor respuesta es la respuesta más simple stackoverflow.com/a/25893747/1536309

— Blair Anderson el

194

Simplemente puede llamar al submitmétodo de su formulario en onchangecaso de que ingrese su archivo.

document.getElementById("file").onchange = function() {
    document.getElementById("form").submit();
};

http://jsfiddle.net/cwvc4/73/

— Alex Turpin
fuente

44

Esto funciona en Safari, donde la solución jQuery no parece funcionar. ¿Extraño?

— henrywright

2

@henrywright: sí. En jQuery, la Submit()llamada activa el submitevento jQuery , pero no activa el formulario subyacente submit(). Por supuesto, puede usar $('form')[0].submit()para golpear el elemento DOM con jQuery

— Gone Coding

68

Solo dígale a la entrada fileque envíe automáticamente el formulario en cualquier cambio:

<form action="http://example.com">
    <input type="file" onchange="form.submit()" />
</form>

Expandir fragmento

Esta solución funciona así:

onchangehace que el elemento de entrada ejecute el siguiente script, siempre que valuese modifique
form hace referencia al formulario, que este elemento de entrada es parte de
submit() hace que el formulario envíe todos los datos a la URL, como se especifica en action

Ventajas de esta solución:

Funciona sin ids. Hace la vida más fácil, si tiene varias formas en una página html.
JavaScript nativo , no se requiere jQuery o similar.
El código está dentro de las etiquetas html. Si inspecciona el html, verá su comportamiento de inmediato.

— slartidan
fuente

48

Usando jQuery:

$('#file').change(function() {
  $('#target').submit();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
  <input type="file" id="file" value="Go" />
</form>

Expandir fragmento

— Samich
fuente

también, la misma pregunta estaba en stackoverflow: stackoverflow.com/questions/4704154/…

— Samich

¿Este enfoque funciona en Safari? No estoy seguro. He probado Chrome, IE y FF que funcionan.

— henrywright

@ErdalG: la versión de trabajo de jQuery se agrega a continuación. Evita este problema.

— Ido codificación

31

JavaScript con onchangeevento:

<form action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>

Expandir fragmento

jQuery .change()y .submit():

$('#fileInput').change(function() {
  $('#myForm').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
     <input type="file" id="fileInput">
</form>

Expandir fragmento

— Alex.K.
fuente

agregue un comentario si rechaza el voto para aclarar qué está mal o qué debería mejorarse.

— Alex.K.

9

La solución más corta es

<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />

— xboz
fuente

2

¿Qué talonchange="this.form.submit()"

— vikkee

1

¿Qué tal onchange="form.submit()"? :)

— slartidan

5

<form id="thisForm" enctype='multipart/form-data'>    
  <input type="file" name="file" id="file">
</form>

<script>
$(document).on('ready', function(){
  $('#file').on('change', function(){
    $('#thisForm').submit();
  });
});
</script>

— Dhurba Baral
fuente

4

Si ya estás usando jQuery simple:

<input type="file" onChange="$(this).closest('form').submit()"/>

— Sojtin
fuente

4

Esta es mi solución de carga de imágenes, cuando el usuario seleccionó el archivo.

Parte HTML:

<form enctype="multipart/form-data" id="img_form" method="post">
    <input id="img_input" type="file" name="image" accept="image/*">
</form>

JavaScript:

document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
    var upload = document.getElementById('img_input');
    var image = upload.files[0];
    $.ajax({
      url:"/foo/bar/uploadPic",
      type: "POST",
      data: new FormData($('#img_form')[0]),
      contentType:false,
      cache: false,
      processData:false,
      success:function (msg) {}
      });
};

— sigi
fuente

2

Pruebe el siguiente código con jquery:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<script>
$(document).ready(function(){
    $('#myForm').on('change', "input#MyFile", function (e) {
        e.preventDefault();
        $("#myForm").submit();
    });
});
</script>
<body>
    <div id="content">
        <form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
            <input type="file" id="MyFile" value="Upload" />
        </form>
    </div>
</body>
</html>

— Razib Al Mamun
fuente

+1 porque este es el único método que encontré que me permitió detectar el evento de envío con jquery. Los otros métodos parecen omitir el evento de envío, por lo que no puedo hacer verificaciones en el formulario o enviarlo con Ajax cuando los uso. Gracias

— user1404617

1

Para aquellos que usan .NET WebForms, puede que no se desee enviar una página completa. En su lugar, use la misma onchangeidea para que javascript haga clic en un botón oculto (por ejemplo, <asp: Button ...) y el botón oculto puede quitarle el resto. Asegúrate de que estás haciendo un display: none;botón y no Visible="false".

— peroija
fuente

1

HTML

<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>

JAVASCRIPT PURO

<script type="text/javascript">
window.onload = function() {
    document.getElementById("xfilename").onchange = function() {
        document.getElementById("xtarget").submit();
    }
};
</script>

— KingRider
fuente

1

<form action="http://example.com">
    <input type="file" onchange="Submit()" />
</form>

 <script>
     // it will submit form 0 or you have to select particular form
     document.getElementsByTagName("form")[0].submit();       
 </script>

— Anant Dabhi
fuente

0

Puede poner este código para que su código funcione con una sola línea de código

<input type="file" onchange="javascript:this.form.submit()">

Esto cargará el archivo en el servidor sin hacer clic en el botón Enviar

— Amit Kumar
fuente