admin管理员组

文章数量:1323335

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?

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?

• javascript
• jquery
• html

Share Follow asked Nov 8, 2013 at 19:06 user2970179user2970179 1

• There are a lot of separate issues here. I would try to pick apart each one, attempt a solution, and if you get stuck, then ask subsequent questions, including the particular block of code you're working on, what you expect it to do, and what isn't working about it. – KyleMit ♦ Commented Nov 8, 2013 at 19:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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 pletes 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

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.

本文标签： javascriptA button for Open Dialog Box using HTML and JQueryStack Overflow