Bagaimana cara memeriksa apakah file input kosong di jQuery

102

Merek baru di JS.
Saya mencoba memeriksa apakah elemen input file kosong saat mengirimkan formulir dengan jQuery / JavaScript. Saya telah melalui banyak solusi dan tidak ada yang berhasil untuk saya. Saya mencoba untuk menghindari /c/fakepath(kecuali tidak ada pilihan lain)

<input type="file" name="videoFile" id="videoUploadFile" />

Ini tidak bekerja:

var vidFile = $("#videoUploadFile").value;

Satu-satunya cara saya bisa mendapatkan nama file adalah jika saya menggunakan yang berikut ini:

var vidFile = document.getElementById("videoUploadFile").files[0].name;

Jika tidak ada file yang tersedia, kode melontarkan kesalahan:

tidak dapat membaca nama properti yang tidak ditentukan

yang masuk akal karena lariknya tidak disetel. tetapi saya tidak tahu bagaimana melakukan penanganan kesalahan dengan ini.

Bagaimana cara mengambil elemen input file dengan benar videoUploadFile, memeriksa apakah kosong, menampilkan pesan kesalahan jika kosong?

pengguna3753569
sumber
7
Periksa .files.length?
Teemu
5
Mengapa seseorang menolak pertanyaan ini? Terkadang saya tidak mengerti SO. Saya memilih Anda kembali ke 0.
Seano666
Anda juga dapat memfilter file yang tidak kosong jika Anda memiliki lebih dari satu file di formulir:var files = $('#formbody').find('input[type=file]').filter(function() { return $(this)[0].files.length > 0; });
Piotr Kowalski

Jawaban:

179

Cukup periksa properti length files , yang merupakan objek FileList yang terdapat pada elemen input

if( document.getElementById("videoUploadFile").files.length == 0 ){
    console.log("no files selected");
}
Patrick Evans
sumber
1
( document.getElementById("videoUploadFile").files.length === 0 )
Pathros
140

Ini adalah versi jQuery-nya:

if ($('#videoUploadFile').get(0).files.length === 0) {
    console.log("No files selected.");
}
Salim
sumber
1
Jawaban ini lebih tepat karena OP meminta solusi JQuery.
Hussain Akbar
$('#videoUploadFile').get(0)sama seperti $('#videoUploadFile')[0]tetapi mungkin get()melakukan beberapa pemeriksaan kewarasan
zanderwar
18

Untuk memeriksa apakah file input kosong atau tidak dengan menggunakan properti panjang file, indexharus ditentukan seperti berikut:

var vidFileLength = $("#videoUploadFile")[0].files.length;
if(vidFileLength === 0){
    alert("No file selected.");
}
Mamun
sumber
4

Saya tahu saya terlambat ke pesta tetapi saya pikir saya akan menambahkan apa yang akhirnya saya gunakan untuk ini - yaitu hanya memeriksa apakah input unggahan file tidak mengandung nilai yang sebenarnya dengan operator not & JQuery seperti ini:

if (!$('#videoUploadFile').val()) {
  alert('Please Upload File');
}

Perhatikan bahwa jika ini dalam formulir, Anda mungkin juga ingin membungkusnya dengan penangan berikut untuk mencegah formulir dikirim:

$(document).on("click", ":submit", function (e) {

  if (!$('#videoUploadFile').val()) {
  e.preventDefault();
  alert('Please Upload File');
  }

}
Joel Youngberg
sumber
3

Pertanyaan: bagaimana cara memeriksa File kosong atau tidak?

Jwb: Saya telah mengatasi masalah ini menggunakan kode Jquery ini

//If your file Is Empty :     
      if (jQuery('#videoUploadFile').val() == '') {
                       $('#message').html("Please Attach File");
                   }else {
                            alert('not work');
                   }

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="videoUploadFile">
<br>
<br>
<div id="message"></div>

Adnan Limdiwala
sumber
1
Penjelasan lebih lanjut tentang mengapa ini berhasil atau apa yang salah dalam pertanyaan awal akan membantu meningkatkan kualitas jawaban ini.
Josh Burgess
@josh burgess jawaban ini adalah cara memeriksa File kosong atau tidak adalah cara lain untuk memeriksa file Anda ketika Anda mengirimkan formulir menggunakan jquery.
Adnan Limdiwala
@JoshBurgess, OP menanyakan bagaimana melakukan ini di jQuery. Semua jawaban lainnya menggunakan vanilla JS atau kombinasi JS dan jQuery. Ini adalah satu-satunya yang menggunakan jQuery secara eksklusif. Mungkin saya pilih-pilih, tapi saya tidak suka mencampur jQuery dengan vanilla JS kecuali saya benar-benar harus melakukannya.
Eduard Luca
@EduardLuca Jawabannya sudah lebih dari dua tahun. Itu ditandai sebagai kualitas rendah pada saat itu. Penjelasan tentang kode tersebut umumnya dihargai oleh komunitas SO, dan komentar tersebut dimaksudkan sebagai pengingat yang bermanfaat untuk tidak hanya memposting kode tetapi untuk menjelaskan apa kode itu dan mengapa itu berfungsi. Harapan yang membantu menjernihkan semuanya.
Josh Burgess