Como envio automaticamente um formulário de upload quando um arquivo é selecionado?

154

Eu tenho um formulário de upload de arquivo simples. Como faço para enviar automaticamente quando um arquivo foi selecionado? Não quero que o usuário tenha que clicar no botão Enviar.

javascript html

— ram1
fonte

9

E se o usuário selecionar o arquivo errado? Na IMO, você deve deixar para o usuário escolher quando enviar.

— Tyler Crompton

2

@Tyler A maioria das pessoas seleciona o arquivo correto e eu estou tentando reduzir o atrito de UX. Para as pessoas que selecionam o arquivo errado, após o upload, elas podem optar por excluí-lo.

— ram1

3

"a maioria das pessoas" toma decisões inteligentes, mas a maioria não.

— Phix

2

Concordo com o @TylerCrompton, os usuários cometerão os erros mais idiotas e culparão você por isso, você pode adicionar uma desfazer após o envio.

— Ross Keddy

3

a melhor resposta é a resposta mais simples stackoverflow.com/a/25893747/1536309

— Blair Anderson

194

Você pode simplesmente chamar o submitmétodo do seu formulário no onchangeevento de entrada do arquivo.

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

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

— Alex Turpin
fonte

4

Isso funciona no Safari, onde a solução jQuery parece não funcionar. Estranho?

— henrywright

2

@henrywright: Sim. No jQuery, a Submit()chamada aciona o submitevento jQuery , mas não dispara o formulário subjacente submit(). Você pode de uso claro $('form')[0].submit()para bater o elemento DOM com jQuery

— ida Codificação

68

Basta dizer ao file-input para enviar automaticamente o formulário em qualquer alteração:

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

Expandir snippet

Esta solução funciona assim:

onchangefaz com que o elemento de entrada execute o seguinte script, sempre que valuefor modificado
form faz referência ao formulário, de que este elemento de entrada faz parte de
submit() faz com que o formulário envie todos os dados para a URL, conforme especificado em action

Vantagens desta solução:

Funciona sem ids. Facilita a vida, se você tiver vários formulários em uma página html.
Javascript nativo , não é necessário jQuery ou similar.
O código está dentro das tags html. Se você inspecionar o html, verá seu comportamento imediatamente.

— slartidan
fonte

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 snippet

— Samich
fonte

Além disso, a mesma pergunta estava no stackoverflow: stackoverflow.com/questions/4704154/…

— #

Essa abordagem funciona no Safari? Não tenho certeza. Eu testei o Chrome, IE e FF, que funcionam.

— 217144

@ErdalG: Versão de trabalho do jQuery adicionada abaixo. Isso evita esse problema.

— Gone Coding

31

JavaScript com onchangeevento:

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

Expandir snippet

jQuery .change()e .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 snippet

— Alex.K.
fonte

adicione um comentário se você fizer voto negativo para deixar claro o que está errado ou o que deve ser melhorado.

— Alex.K.

9

A solução mais curta é

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

— xboz
fonte

2

Como sobreonchange="this.form.submit()"

— vikkee

1

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

4

Se você já usa o jQuery simple:

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

— Sojtin
fonte

4

Esta é a minha solução de upload de imagens, quando o usuário selecionou o arquivo.

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
fonte

2

Tente o código abaixo com 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
fonte

+1 porque este é o único método que encontrei que me permitiu capturar o evento de envio com jquery. Os outros métodos parecem ignorar o evento de envio, portanto não posso fazer verificações no formulário ou enviar com o Ajax ao usá-los. Graças

— user1404617

1

Para aqueles que estão usando o .NET WebForms, talvez não seja necessário enviar uma página inteira. Em vez disso, use a mesma onchangeidéia para que o javascript clique em um botão oculto (por exemplo, <asp: Button ...) e o botão oculto pode tirar o resto. Verifique se você está fazendo um display: none;botão e não Visible="false".

— peroija
fonte

1

HTML

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

JAVASCRIPT PURE

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

— KingRider
fonte

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
fonte

0

Você pode colocar esse código para fazer seu código funcionar com apenas uma linha de código

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

Isso fará o upload do arquivo no servidor sem clicar no botão enviar

— Amit Kumar
fonte