How to check if input file is empty in jquery without using another button

Question

I want to detect if an image has been selected. If so, then display some text otherwise if its empty display some other text. As soon as the image is selected, automatically different message should be shown not after clicking a button. The following is my code.

Html

<input type="file" name="picture" id="image" />
<div id="message">Add image</div>

Javascript

$(document).ready(
 if ($('#image').get(0).files.length !== 0) {
  function() {
    $('#message').text('You added an image');
   }
 }
);

You can use select with predefined images and monitor with jQuery any change in selected item. — Mulli
– Mulli, Commented Jun 8, 2020 at 20:16
You execute your jQuery when the DOM loads so the file input won't ever have a length, nor will that code execute when the file input changes — j08691
– j08691, Commented Jun 8, 2020 at 20:16
This is very strangely structured. It seems like you took the function(){} that should be there for the document ready, and moved it down into your if statement. — Taplar
– Taplar, Commented Jun 8, 2020 at 20:17

Majed Badawi · Accepted Answer · 2020-06-08 20:15:37Z

1

You can set a listener on the input and change the content of message as follows:

$( document ).ready(function(){
     $('#image').on('change', function(){
          $('#message').html('You selected an image');
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="picture" id="image" />
<div id="message">Add image</div>

answered Jun 8, 2020 at 20:15

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to check if input file is empty in jquery without using another button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related