Bagaimana cara mengirim otomatis formulir unggahan saat file dipilih?

154

Saya punya formulir unggah file sederhana. Bagaimana saya membuatnya mengirimkan secara otomatis ketika file telah dipilih? Saya tidak ingin pengguna harus mengklik tombol Kirim.

javascript html ram1
sumber
9
Bagaimana jika pengguna memilih file yang salah? IMO, Anda harus menyerahkannya kepada pengguna untuk memilih waktu pengiriman.
Tyler Crompton
2
@ Tyler Kebanyakan orang akan memilih file yang benar dan saya mencoba mengurangi gesekan UX. Bagi orang-orang yang memilih file yang salah, setelah diunggah mereka dapat memilih untuk menghapusnya.
ram1
3
"kebanyakan orang" membuat keputusan yang cerdas, tetapi kebanyakan orang tidak.
Phix
2
Saya setuju dengan @TylerCrompton, pengguna akan membuat kesalahan paling bodoh dan menyalahkan Anda untuk itu, Anda bisa menambahkan membatalkan setelah pengiriman.
Ross Keddy
3
jawaban terbaik adalah jawaban paling sederhana stackoverflow.com/a/25893747/1536309
Blair Anderson

Jawaban:

194

Anda bisa memanggil submitmetode formulir Anda onchangejika input file Anda.

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

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

Alex Turpin
sumber
4
Ini berfungsi di Safari di mana solusi jQuery sepertinya tidak berfungsi. Aneh?
henrywright
2
@henrywright: Ya. Di jQuery Submit()panggilan memicu submitacara jQuery , tetapi tidak memadamkan formulir yang mendasarinya submit(). Anda tentu saja dapat menggunakan $('form')[0].submit()untuk menekan elemen DOM dengan jQuery
Gone Coding
68

Katakan saja file-input untuk secara otomatis mengirimkan formulir pada setiap perubahan:

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

Solusi ini berfungsi seperti ini:

  • onchangemembuat elemen input menjalankan skrip berikut, setiap kali valuedimodifikasi
  • form referensi formulir, bahwa elemen input ini adalah bagian dari
  • submit() menyebabkan formulir mengirim semua data ke URL, sebagaimana ditentukan dalam action

Keuntungan dari solusi ini:

  • Bekerja tanpa ids. Itu membuat hidup lebih mudah, jika Anda memiliki beberapa formulir dalam satu halaman html.
  • Javascript asli , tidak diperlukan jQuery atau yang serupa.
  • Kode ada di dalam tag html. Jika Anda memeriksa html, Anda akan segera melihat perilakunya.
slartidan
sumber
48

Menggunakan 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>
Luaskan cuplikan

Samich
sumber
juga, pertanyaan yang sama ada di stackoverflow: stackoverflow.com/questions/4704154/…
Samich
Apakah pendekatan ini berfungsi di Safari? Saya tidak yakin. Saya sudah menguji Chrome, IE dan FF yang semuanya berfungsi.
henrywright
@ErdalG: Versi jQuery yang berfungsi ditambahkan di bawah. Ini menghindari masalah ini.
Hilang Coding
31

JavaScript dengan onchangeacara: 

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

jQuery .change()dan .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>
Luaskan cuplikan

Alex.K.
sumber
tambahkan komentar jika Anda memilih untuk menjelaskan apa yang salah atau apa yang harus diperbaiki.
Alex.K.
9

Solusi terpendek adalah

<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
xboz
sumber
2
Bagaimana denganonchange="this.form.submit()"
vikkee
1
Bagaimana dengan 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
sumber
4

Jika Anda sudah menggunakan jQuery sederhana:

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

Ini adalah solusi unggah gambar saya, ketika pengguna memilih file.

Bagian 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
sumber
2

Coba kode di bawah ini dengan 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
sumber
+1 karena ini adalah satu-satunya metode yang saya temukan yang memungkinkan saya menangkap acara kirim dengan jquery. Metode lain tampaknya mem-bypass acara jadi saya tidak bisa melakukan pengecekan pada formulir atau mengirim dengan Ajax saat menggunakannya. Terima kasih
user1404617
1

Bagi mereka yang menggunakan .NET WebForms, pengiriman satu halaman penuh mungkin tidak diinginkan. Alih-alih, gunakan onchangeide yang sama untuk meminta javascript mengklik tombol tersembunyi (mis. <Asp: Tombol ...) dan tombol tersembunyi dapat mengambil sisanya. Pastikan Anda melakukan display: none;tombol dan tidak Visible="false".

peroija
sumber
1

HTML

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

MURNI JAVASCRIPT

<script type="text/javascript">
window.onload = function() {
    document.getElementById("xfilename").onchange = function() {
        document.getElementById("xtarget").submit();
    }
};
</script>
KingRider
sumber
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
sumber
0

Anda dapat meletakkan kode ini untuk membuat kode Anda bekerja hanya dengan satu baris kode

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

Ini akan mengunggah file di server tanpa mengklik tombol kirim

Amit Kumar
sumber