วิธีตรวจสอบว่าไฟล์อินพุตว่างเปล่าใน jQuery

ใหม่เอี่ยมสำหรับ JS
ฉันกำลังพยายามตรวจสอบว่าองค์ประกอบอินพุตไฟล์ว่างหรือไม่เมื่อส่งแบบฟอร์มด้วย jQuery / JavaScript ฉันได้แก้ปัญหาต่างๆมากมายและไม่มีอะไรได้ผลสำหรับฉัน ฉันพยายามหลีกเลี่ยง/c/fakepath(เว้นแต่จะไม่มีตัวเลือกอื่น)

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

สิ่งนี้ใช้ไม่ได้:

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

วิธีเดียวที่ฉันจะได้ชื่อไฟล์คือถ้าฉันใช้สิ่งต่อไปนี้:

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

หากไม่มีไฟล์รหัสจะแสดงข้อผิดพลาด:

ไม่สามารถอ่านชื่อคุณสมบัติของ undefined

ซึ่งสมเหตุสมผลเนื่องจากไม่ได้ตั้งค่าอาร์เรย์ แต่ฉันไม่สามารถหาวิธีจัดการกับข้อผิดพลาดนี้ได้

ฉันจะคว้าองค์ประกอบการป้อนไฟล์อย่างถูกต้องได้อย่างไรvideoUploadFileตรวจสอบว่าว่างเปล่าส่งข้อความแสดงข้อผิดพลาดหากว่างเปล่า

เพียงตรวจสอบความยาวของคุณสมบัติไฟล์ซึ่งเป็นอ็อบเจ็กต์FileList ที่มีอยู่ในองค์ประกอบอินพุต

if( document.getElementById("videoUploadFile").files.length == 0 ){
    console.log("no files selected");
}

นี่คือเวอร์ชัน jQuery ของมัน:

if ($('#videoUploadFile').get(0).files.length === 0) {
    console.log("No files selected.");
}

ในการตรวจสอบว่าไฟล์อินพุตว่างหรือไม่โดยใช้คุณสมบัติความยาวไฟล์indexควรระบุดังนี้:

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

ฉันรู้ว่าฉันไปงานปาร์ตี้สาย แต่ฉันคิดว่าฉันจะเพิ่มสิ่งที่ฉันใช้สำหรับสิ่งนี้ซึ่งก็คือการตรวจสอบว่าอินพุตการอัปโหลดไฟล์ไม่มีค่าที่แท้จริงหรือไม่โดยใช้ตัวดำเนินการ not & JQuery ดังนี้:

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

โปรดทราบว่าหากเป็นแบบฟอร์มคุณอาจต้องการรวมตัวจัดการต่อไปนี้เพื่อป้องกันไม่ให้ส่งแบบฟอร์ม:

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

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

}

คำถาม: วิธีตรวจสอบไฟล์ว่างหรือไม่?

ตอบ: ฉันแก้ปัญหานี้โดยใช้รหัส Jquery นี้

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

  $("#customFile").change(function() { 
    var fileName = $("#customFile").val();  

    if(fileName) { // returns true if the string is not empty   
        $('.picture-selected').addClass('disable-inputs'); 
        $('#btn').removeClass('disabled');   
    } else { // no file was selected 
      $('.picture-selected').removeClass('disable-inputs'); 
      $('#btn').addClass('disabled');
    }  
  });