A button for Open Dialog Box using HTML and JQuery

Question

I am creating a web application that designs web pages. I am using html5 to create this application. I want to create a button that pops up the Open Dialog Box where the user can select an image or video. Once selected the image is inserted onto the page.

I have searched but it is making me more confused. What functions/methods and links am I suppose to use?

Answer 1

You can do some work to stylize it, but here's the general idea:

Let's say you have some very simple markup like this:

<input type='file' />
<img id="myImg" src="#" alt="your image" />

• You want to tap into the change event of the <input type='file' /> element.
• Once there, check to see if any files have been selected, and if so, if the first file in the array exists.
• Then create a new FileReader object. We'll tell this object two things:
  1. When it raises the onload event, it should call a function imageIsLoaded .
  2. Then take the data from the first file and read it in.
     
     • When this completes it will raise the event in step one

In JavaScript , that'll look like this:

$(":file").change(function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
    }
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
};

In this example, when the image is loaded, we'll replace the source attribute of the img we have in markup in the imageIsLoaded function.

Working Demo In Fiddle

Answer 2

You want to use

<input type="file">

You can use HTML5 FileReader to get the file locally right away, or submit it to do something on your end.