Jak automatycznie przesłać formularz przesyłania po wybraniu pliku?

154

Mam prosty formularz przesyłania plików. Jak ustawić automatyczne przesyłanie po wybraniu pliku? Nie chcę, aby użytkownik musiał klikać przycisk Prześlij.

javascript html

— ram1
źródło

9

Co się stanie, jeśli użytkownik wybierze niewłaściwy plik? IMO, należy pozostawić użytkownikowi wybór, kiedy przesłać.

— Tyler Crompton,

2

@Tyler Większość ludzi wybierze właściwy plik, a ja staram się zmniejszyć tarcie UX. Osoby, które wybiorą niewłaściwy plik, mogą po przesłaniu go usunąć.

— ram1

3

„większość ludzi” podejmuje mądre decyzje, ale większość nie.

— Phix,

2

Zgadzam się z @TylerCrompton, użytkownicy będą popełniać najgłupsze błędy i obwiniają Cię za to, możesz dodać cofnięcie po przesłaniu.

— Ross Keddy

3

najlepszą odpowiedzią jest najprostsza odpowiedź stackoverflow.com/a/25893747/1536309

— Blair Anderson

194

Możesz po prostu wywołać submitmetodę swojego formularza w onchangeprzypadku wprowadzenia pliku.

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

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

— Alex Turpin
źródło

4

Działa to w Safari, gdzie rozwiązanie jQuery wydaje się nie działać. Dziwne?

— henrywright

2

@henrywright: Tak. W jQuery Submit()wywołanie wyzwala submitzdarzenie jQuery , ale nie uruchamia podstawowego formularza submit(). Możesz oczywiście użyć $('form')[0].submit()do trafienia elementu DOM za pomocą jQuery

— Gone Coding

68

Po prostu powiedz file-input, aby automatycznie przesłał formularz po każdej zmianie:

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

Rozwiń fragment

To rozwiązanie działa tak:

onchangepowoduje, że element wejściowy wykonuje następujący skrypt, po każdej valuemodyfikacji
form odwołuje się do formularza, którego częścią jest ten element wejściowy
submit() powoduje, że formularz wysyła wszystkie dane na adres URL określony w action

Zalety tego rozwiązania:

Działa bez ids. Ułatwia życie, jeśli masz kilka formularzy na jednej stronie html.
Natywny javascript, nie jest wymagany jQuery ani podobny.
Kod znajduje się wewnątrz tagów html. Jeśli sprawdzisz kod HTML, od razu zobaczysz jego zachowanie.

— slartidan
źródło

48

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

Rozwiń fragment

— Samich
źródło

również to samo pytanie było na stackoverflow: stackoverflow.com/questions/4704154/…

— Samich

Czy to podejście działa w Safari? Nie jestem pewny. Przetestowałem Chrome, IE i FF, które działają.

— henrywright

@ErdalG: Działająca wersja jQuery dodana poniżej. Pozwala uniknąć tego problemu.

— Gone Coding,

31

JavaScript ze onchangezdarzeniem:

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

Rozwiń fragment

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

Rozwiń fragment

— Alex.K.
źródło

dodaj komentarz, jeśli głosujesz negatywnie, aby wyjaśnić, co jest nie tak lub co należy poprawić.

— Alex.K.

9

Najkrótszym rozwiązaniem jest

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

— xboz
źródło

2

Co powiesz naonchange="this.form.submit()"

— Vikkee

1

A co powiesz 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
źródło

4

Jeśli korzystasz już z jQuery simple:

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

— Sojtin
źródło

4

To jest moje rozwiązanie do przesyłania obrazów, gdy użytkownik wybrał plik.

Część 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
źródło

2

Wypróbuj poniższy kod z 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
źródło

+1, ponieważ jest to jedyna metoda, jaką znalazłem, która umożliwiła mi złapanie zdarzenia przesyłania za pomocą jquery. Inne metody wydają się omijać zdarzenie przesyłania, więc nie mogę sprawdzić formularza ani przesłać go za pomocą Ajax podczas ich używania. Dzięki

— user1404617

1

Dla tych, którzy używają .NET WebForms, przesyłanie całej strony może nie być pożądane. Zamiast tego użyj tego samego onchangepomysłu, aby javascript kliknął ukryty przycisk (np. <Asp: Button ...), a ukryty przycisk może zająć resztę. Upewnij się, że robisz display: none;na przycisku, a nie Visible="false".

— peroija
źródło

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
źródło

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
źródło

0

Możesz umieścić ten kod, aby kod działał tylko z jedną linią kodu

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

Spowoduje to przesłanie pliku na serwer bez klikania przycisku przesyłania

— Amit Kumar
źródło