HTML <input type = 'file'> Dosya Seçim Etkinliği

144

Diyelim ki bu koda sahibiz:

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

sonuçlanan:

Göz at ve yükle düğmesini gösteren resim

Kullanıcı 'Göz at ...' düğmesini tıkladığında, bir dosya arama iletişim kutusu açılır:

bir dosya seçiliyken bir dosya arama iletişim kutusunu gösteren resim

Kullanıcı dosyayı çift tıklatarak veya 'Aç' düğmesini tıklatarak seçecektir.

Dosya seçildikten sonra bilgilendirilmek için kullanabileceğim bir Javascript Olayı var mı?

javascript html javascript-events

— Ay
kaynak

6

Ne korkak bir eski windows UI!

— El-Burritos

@ El-Burritos bu 2010 yılında gönderildi; Tabii ki, eski bir Windows kullanıcı arayüzü: D

— Simon Cheng

181

Değişiklik olayını dinleyin.

input.onchange = function(e) { 
  ..
};

— Anurag
kaynak

3

nereye yazacağız .. javascript script tags

— Moon

5

komut dosyası etiketlerinde evet veya <input type="file" onchange="..." />bu önerilmese de bir niteliği ( ) olarak ekleyebilirsiniz .

— Anurag

7

IE7 ve 8'de 'change' olayının form olayıyla sınırlı olmadığını unutmayın. Dinleyicinizi <input> etiketine koymanız gerekir.

— xer0x

36

Kullanıcının bir dosyayı "yeniden yüklemesi" gerekiyorsa ne olur? onchange tetiklenmez, ancak yine de ilk kez yüklüyormuş gibi yeniden yüklenmelidir.

— bryc

11

Dosya değişmediğinden, kullanıcı aynı dosyayı art arda birden fazla kez seçerse bu işe yaramaz.

— bob0the0mighty

46

Dosyayı yeniden yüklemeniz gerektiğinde, girişin değerini silebilirsiniz. Bir dahaki sefere dosya eklediğinizde, 'değiştiğinde' olayı tetiklenir.

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick

— Clem
kaynak

5

Bu iyi çalışıyor ama garip IE <11 davranışının farkında olun. Girişin değerini değiştirmenize izin vermez, bu nedenle büyük olasılıkla bir geçici çözüme ihtiyacınız olacaktır. stackoverflow.com/questions/9011644/…

— Oleksandr Tkalenko

15

jQuery yolu:

$('input[name=myInputName]').change(function(ev) {

    // your code
});

— Zanon
kaynak

4

İptal seçeneğini tıklasanız bile Değiştir olayı çağrılır.

— anthony
kaynak

2

Soruları kod snippet'inde herhangi bir değişiklik olayı olmadığından, cevabınızı açıklamak için bazı kodlar sağlamanız yararlı olacaktır

— DevDig

Sanırım @anthony şu senaryoya başvuruyor: Bir dosya seçin. Şimdi dosya seçiciyi tekrar açın, ancak bu sefer İptal'e tıklayın. İkinci kez hiçbir dosya seçilmediğinden, dosya giriş kontrolü sıfırlanır, böylece ilk seçimi değiştirilir ve change olayı tetiklenir.

— dvlsc

Chrome 83'te denedim ve İptal düğmesini tıkladığımda etkinlik tetiklenmiyor. Bu cevap oldukça eski ve sanırım en azından Chrome'da düzeltilmiş olmalı.

— Saeed Ahadian

3

Saf JS ile bunu yaptım:

var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
  if (files.files.length > 10) {
    submit.disabled = true;
    warning.classList += "warn"
    return;
  }
  submit.disabled = false;
});

#warning {
    text-align: center;
}

#warning.warn {
	color: red;
	transform: scale(1.5);
	transition: 1s all;
}

<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
  	    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
	    <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>

Snippet'i genişlet

— RegarBoy
kaynak