Bir dosya seçildiğinde yükleme formunu otomatik olarak nasıl gönderirim?

154

Basit bir dosya yükleme formum var. Bir dosya seçildiğinde dosyayı otomatik olarak nasıl gönderirim? Kullanıcının Gönder düğmesini tıklatmasını istemiyorum.

javascript html

— ram1
kaynak

9

Kullanıcı yanlış dosyayı seçerse ne olur? IMO, ne zaman gönderileceğini seçmek için kullanıcıya bırakmalısınız.

— Tyler Crompton

2

@Tyler Çoğu insan doğru dosyayı seçecek ve ben UX sürtünmesini azaltmaya çalışıyorum. Yanlış dosyayı seçenler için, yüklendikten sonra silmeyi tercih edebilirler.

— ram1

3

"çoğu insan" akıllıca kararlar verir, ancak çoğu insan değildir.

— Phix

2

@TylerCrompton ile hemfikirim, kullanıcılar en aptal hataları yapacak ve sizi suçlayacak, gönderildikten sonra geri alabilirsiniz.

— Ross Keddy

3

en iyi cevap en basit cevaptır stackoverflow.com/a/25893747/1536309

— Blair Anderson

194

Dosya girişiniz durumunda formunuzun submityöntemini çağırabilirsiniz onchange.

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

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

— Alex Turpin
kaynak

4

Bu, jQuery çözümü işe yaramadığı için Safari'de çalışır. Garip?

— henrywright

2

@henrywright: Evet. JQuery'de Submit()çağrı jQuery submitolayını tetikler , ancak alttaki formu tetiklemez submit(). Tabii ki $('form')[0].submit()jQuery ile DOM öğesini vurmak için kullanabilirsiniz

— Gone Coding

68

file-İnput'a formu otomatik olarak herhangi bir değişiklikle göndermesini söyleyin :

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

Snippet'i genişlet

Bu çözüm şu şekilde çalışır:

onchangene zaman girdi elemanı aşağıdaki komut dosyasını yürütün yapar valuedeğiştirilir
form bu girdi öğesinin bir parçası olduğu formu referans alır
submit() formun URL'de belirtildiği gibi tüm verileri göndermesine neden olur action

Bu çözümün avantajları:

idS olmadan çalışır . Bir html sayfasında birkaç formunuz varsa hayatı kolaylaştırır .
Yerel javascript, jQuery veya benzeri gerekmez.
Kod html etiketlerinin içindedir . Html'yi incelerseniz, hemen davranışını görürsünüz.

— slartidan
kaynak

48

JQuery kullanma:

$('#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>

Snippet'i genişlet

— Samich
kaynak

Ayrıca, aynı soru stackoverflow idi: stackoverflow.com/questions/4704154/…

— Samich

Bu yaklaşım Safari'de çalışıyor mu? Emin değilim. Hepsi işe yarayan Chrome, IE ve FF'yi test ettim.

— henrywright

@ErdalG: Çalışan jQuery sürümü eklendi. Bu sorunu önler.

— Gitti Kodlama

31

onchangeEtkinliği olan JavaScript :

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

Snippet'i genişlet

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

Snippet'i genişlet

— Alex.K.
kaynak

neyin yanlış veya neyin iyileştirilmesi gerektiğini netleştirmek için oylama yaparsanız bir yorum ekleyin.

— Alex.K.

9

En kısa çözüm

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

— xboz
kaynak

2

Nasıl?onchange="this.form.submit()"

— Vikkee

1

Nasıl 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
kaynak

4

Zaten jQuery simple kullanıyorsanız:

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

— Sojtin
kaynak

4

Kullanıcı dosyayı seçtiğinde bu benim resim yükleme çözümüm.

HTML bölümü:

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

2

Aşağıdaki kodu jquery ile deneyin:

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

+1, çünkü bu, jquery ile boyun eğme olayını yakalamamı sağlayan tek yöntem. Form üzerinde denetimler yapamadığım veya kullanırken Ajax ile gönderemediğim için, diğer yöntemler gönderme olayını atlıyor gibi görünüyor. Teşekkürler

— user1404617 14:17

1

.NET WebForms'u kullananlar için tam sayfa gönderme istenmeyebilir. Bunun yerine, onchangejavascript'in gizli bir düğmeyi (ör. <Asp: Button ...) tıklatması ve gizli düğmenin geri kalanını alması için aynı fikri kullanın. Emin bir yapıyorsun olun display: none;butona değil Visible="false".

— peroija
kaynak

1

HTML

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

JAVASCRIPT SAF

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

— KingRider
kaynak

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
kaynak

0

Kodunuzun tek bir kod satırı ile çalışmasını sağlamak için bu kodu koyabilirsiniz

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

Bu, dosyayı gönder düğmesine tıklamadan sunucuya yükleyecektir

— Amit Kumar
kaynak