jQuery에서 입력 파일이 비어 있는지 확인하는 방법


102

JS를 처음 접했습니다.
jQuery / JavaScript로 양식을 제출할 때 파일 입력 요소가 비어 있는지 확인하려고합니다. 나는 많은 해결책을 겪었고 아무것도 나를 위해 일하지 않습니다. 나는 /c/fakepath(다른 옵션이없는 한)

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

작동하지 않습니다.

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

파일 이름을 얻을 수있는 유일한 방법은 다음을 사용하는 것입니다.

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

사용 가능한 파일이 없으면 코드에서 오류가 발생합니다.

정의되지 않은 속성 이름을 읽을 수 없습니다.

배열이 설정되지 않았기 때문에 의미가 있습니다. 그러나 이것으로 오류 처리를 수행하는 방법을 알 수 없습니다.

파일 입력 요소를 올바르게 잡고 videoUploadFile비어 있는지 확인하고 비어 있으면 오류 메시지를 던지는 방법은 무엇입니까?


7
확인 .files.length?
Teemu

5
누군가이 질문에 반대표를 던지는 이유는 무엇입니까? 나는 때때로 그렇게 이해하지 못한다. 나는 당신을 0으로 다시
찬성했습니다.

양식에 둘 이상의 파일이있는 경우 비어 있지 않은 파일도 필터링 할 수 있습니다.var files = $('#formbody').find('input[type=file]').filter(function() { return $(this)[0].files.length > 0; });
Piotr Kowalski

답변:


179

입력 요소에 포함 된 FileList 객체 인 파일 속성 의 길이를 확인하기 만하면 됩니다.

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

1
( document.getElementById("videoUploadFile").files.length === 0 )
Pathros

140

다음은 jQuery 버전입니다.

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

1
이 답변은 OP가 JQuery 솔루션을 요청함에 따라 더 적합합니다.
Hussain Akbar

$('#videoUploadFile').get(0)동일 $('#videoUploadFile')[0]하지만 아마도 get()몇 가지 온 전성 검사를 수행합니다
zanderwar

18

파일 길이 속성을 사용하여 입력 파일이 비어 있는지 여부를 확인하려면 index다음과 같이 지정해야합니다.

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

4

나는 내가 파티에 늦었다는 것을 알고 있지만 내가 이것을 위해 사용한 것을 추가 할 것이라고 생각했습니다. 이것은 단순히 파일 업로드 입력에 not 연산자 및 JQuery를 사용하여 진실 값이 포함되어 있지 않은지 확인하는 것입니다.

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

양식에있는 경우 다음 처리기로 래핑하여 양식이 제출되지 않도록 할 수도 있습니다.

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

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

}

3

질문 : 파일이 비어 있는지 확인하는 방법은 무엇입니까?

정답 :이 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>


1
이것이 작동하는 이유 또는 원래 질문에서 무엇이 잘못되었는지에 대한 추가 설명은이 답변의 품질을 높이는 데 도움이 될 것입니다.
조쉬 시민

@josh burgess이 대답은 파일이 비어 있는지 확인하는 방법이었습니다 .jquery를 사용하여 양식을 제출할 때 파일을 확인하는 또 다른 방법입니다.
Adnan Limdiwala

@JoshBurgess OP는 jQuery에서 이것을 수행하는 방법을 묻습니다. 다른 모든 답변은 바닐라 JS 또는 JS와 jQuery의 콤보를 사용합니다. 이것은 jQuery를 독점적으로 사용하는 유일한 사람입니다. 내가 까다로울 수도 있지만 실제로 필요하지 않는 한 jQuery와 바닐라 JS를 혼합하고 싶지 않습니다.
Eduard Luca 19

@EduardLuca Answer는 2 년이 넘었습니다. 당시에는 품질이 낮은 것으로 표시되었습니다. 코드에 대한 설명은 일반적으로 SO 커뮤니티에서 높이 평가하며, 주석은 단순히 코드를 게시하는 것뿐만 아니라 코드가 무엇이며 왜 작동하는지 설명하는 데 도움이되는 알림으로 사용되었습니다. 그것이 일을 정리하는 데 도움이되기를 바랍니다.
Josh Burgess
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.