Displaying images from file inputs in Javascript

Question

I need to run a function when someone has finished selecting a file using the file input service. By "file input service", I mean:

<input type="file" name = "foo" id="foo">

I have tried to do this in various ways, first by creating a form to do so and using other techniques, but nothing seems to work. There are several ways to detect if the thing has something, like by using:

document.getElementById("foo").files[0]

This only returns a value if you run it, but I cannot constantly compile a while statement to do this.

Aniket G · Accepted Answer · 2019-03-07 01:04:32Z

1

Pure Javascript

You can use pure javascript like below. This code basically uses document.getElementById() to get the input element, and .addEventListener() and change to do something when the input field is changed.

document.getElementById("foo").addEventListener("change", function() {
  console.log("Changed");
});

<input type="file" name="foo" id="foo">

jQuery

Use jQuery .change(). Basically, this code will console.log "Changed" when the input changes (you add a file).

$("#foo").change(function() {
  console.log("Changed");
});

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

answered Mar 7, 2019 at 1:04

Aniket G

3,5321 gold badge16 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

Displaying images from file inputs in Javascript

1 Answer 1

Pure Javascript

jQuery

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Pure Javascript

jQuery

Comments

Your Answer

Sign up or log in

Post as a guest

Related