jQueryで入力ファイルが空かどうかを確認する方法


100

JSの新品。
jQuery / JavaScriptでフォームを送信するときに、ファイルinput要素が空かどうかを確認しようとしています。たくさんの解決策を試してみましたが、何もうまくいきません。/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
なぜ誰かがこの質問に反対票を投じるのですか?私は時々SOを理解していません。私はあなたが0にバックupvoted
Seano666

フォーム上に複数のを持っている場合、あなたはまた、非空のファイルをフィルタリングすることができますvar files = $('#formbody').find('input[type=file]').filter(function() { return $(this)[0].files.length > 0; });
ピョートル・コワルスキー

回答:


177

input プロパティに含まれるFileListオブジェクトであるfilesプロパティの長さを確認するだけです

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ソリューションを要求したため、この回答の方が適切です。
フセインアクバル

$('#videoUploadFile').get(0)と同じですが$('#videoUploadFile')[0]、おそらくget()いくつかの健全性チェックを行います
zanderwar

18

ファイル長プロパティを使用して入力ファイルが空かどうかを確認するにはindex、次のように指定する必要があります。

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

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を使用してフォームを送信するときにファイルを確認するもう1つの方法です。
Adnan Limdiwala 2017

OPがjQueryでこれを行う方法を尋ねている@JoshBurgess。他のすべての回答では、バニラJSまたはJSとjQueryの組み合わせを使用します。これは、jQueryを排他的に使用する唯一のものです。多分私はうるさいですが、本当に必要でない限り、jQueryとバニラJSを混ぜたくありません。
Eduard Luca

@EduardLuca Answerは2年以上前のものです。当時は低品質として報告されていました。コードの説明は一般的にSOコミュニティに高く評価されており、コメントは、コードを投稿するだけでなく、コードが何であり、なぜ機能するのかを説明するのに役立つメモとして使用されました。それが物事を明確にするのに役立つことを願っています。
Josh Burgess

3

私はパーティーに遅れていることを知っていますが、私がこれに使用したものを追加したいと思いました-これは単に、ファイルアップロード入力にnot演算子とJQueryを使用して真の値が含まれていないかどうかを確認するためです:

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

これがフォーム内にある場合は、次のハンドラーでラップして、フォームが送信されないようにすることもできます。

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

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

}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.