Come posso inviare automaticamente un modulo di caricamento quando viene selezionato un file?

154

Ho un semplice modulo di caricamento file. Come faccio a inviarlo automaticamente quando è stato selezionato un file? Non voglio che l'utente debba fare clic sul pulsante Invia.

javascript html

— ram1
fonte

9

Cosa succede se l'utente seleziona il file sbagliato? IMO, dovresti lasciare all'utente la possibilità di scegliere quando inviare.

— Tyler Crompton,

2

@Tyler La maggior parte delle persone selezionerà il file corretto e sto cercando di ridurre l'attrito UX. Per quelle persone che selezionano il file sbagliato, dopo che è stato caricato possono scegliere di eliminarlo.

— ram1

3

"la maggior parte delle persone" prende decisioni intelligenti, ma molte persone non lo sono.

— Phix,

2

Sono d'accordo con @TylerCrompton, gli utenti faranno gli errori più stupidi e ti biasimeranno per questo, potresti aggiungere un annullamento dopo l'invio.

— Ross Keddy,

3

la risposta migliore è la risposta più semplice stackoverflow.com/a/25893747/1536309

— Blair Anderson

194

Puoi semplicemente chiamare il tuo modulo submit metodo in onchangecaso di input di file.

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

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

— Alex Turpin
fonte

4

Funziona in Safari dove la soluzione jQuery non sembra funzionare. Strano?

— henrywright,

2

@henrywright: Sì. In jQuery la Submit()chiamata attiva l' submitevento jQuery , ma non attiva il modulo sottostante submit(). Ovviamente puoi usare $('form')[0].submit()per colpire l'elemento DOM con jQuery

— Gone Coding il

68

Basta dire al file-input di inviare automaticamente il modulo su qualsiasi modifica:

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

Espandi frammento

Questa soluzione funziona in questo modo:

onchangefa in modo che l'elemento di input esegua il seguente script, ogni volta che valueviene modificato
form fa riferimento al modulo, di cui fa parte questo elemento di input
submit() fa in modo che il modulo invii tutti i dati all'URL, come specificato in action

Vantaggi di questa soluzione:

Funziona senza ids. Ti semplifica la vita, se hai diversi moduli in una pagina html.
JavaScript nativo , nessun jQuery o simili richiesti.
Il codice è all'interno dei tag html. Se controlli l'html, vedrai subito il suo comportamento.

— slartidan
fonte

48

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

Espandi frammento

— Samich
fonte

Inoltre, la stessa domanda era su StackOverflow: stackoverflow.com/questions/4704154/...

— Samich

Questo approccio funziona in Safari? Non ne sono sicuro. Ho testato Chrome, IE e FF che funzionano tutti.

— henrywright,

@ErdalG: versione jQuery funzionante aggiunta di seguito. Evita questo problema.

— Codice finito

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>

Espandi frammento

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>

Espandi frammento

— Alex.K.
fonte

aggiungere un commento se si vota verso il basso per chiarire cosa non va o cosa dovrebbe essere migliorato.

— Alex.K.

9

La soluzione più breve è

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

— xboz
fonte

2

Che ne dicionchange="this.form.submit()"

— vikkee,

1

Che ne dici 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 stai già utilizzando jQuery simple:

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

— Sojtin
fonte

4

Questa è la mia soluzione di caricamento delle immagini, quando l'utente ha selezionato il file.

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

Prova il codice qui sotto 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
fonte

+1 perché questo è l'unico metodo che ho trovato che mi ha permesso di catturare l'evento di invio con jquery. Gli altri metodi sembrano aggirare l'evento di invio, quindi non posso fare controlli sul modulo o inviare con Ajax quando li utilizzo. Grazie

— user1404617

1

Per coloro che utilizzano .NET WebForms potrebbe non essere necessario inviare una pagina intera. Invece, usa la stessa onchangeidea per fare in modo che javascript faccia clic su un pulsante nascosto (ad es. <Asp: Button ...) e il pulsante nascosto può fare il resto. Assicurati di fare un display: none;pulsante e non Visible="false".

— peroija
fonte

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

Puoi inserire questo codice per far funzionare il tuo codice con una sola riga di codice

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

Questo caricherà il file sul server senza fare clic sul pulsante Invia

— Amit Kumar
fonte