Using jquery with file upload form field

Question

I'm not sure this is possible without some kind of server interaction but I am hoping it is for prototyping purposes. I have a file upload form field. I would like user to be able to select image from hard drive and jquery will put that image into a div in the DOM.

Here is my code

<div class="label">Upload Your Own Logo</div>
  <input name="upload" type="file" id="logo-upload">

Div where image should go

<div class="user-logo">logo.png</div>

Jahnold · Accepted Answer · 2012-05-30 16:43:07Z

1

If the user's browser has HTML5 FileReader API then this is possible:

var file = document.getElementById('logo-upload').files[0],
    reader = new FileReader();
reader.readAsDataURL(file);

reader.onloadend = function(e) {
    var image = $('<img>').attr('src',e.target.result);
    $(image).appendTo.('.user-logo');
}

answered May 30, 2012 at 16:43

Jahnold

7,6932 gold badges39 silver badges31 bronze badges

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

Comments

srijan · Accepted Answer · 2012-05-30 15:34:56Z

0

You don't need AJAX for that. In fact you don't even need jquery.

<input type="file" name="ss" id="fileUpload" onchange="dothis()"/>
<div id="picDiv"></div>

use function dothis() to append the image you upload inside #picDiv

function dothis()
{
    var oImg=document.createElement("img");
    oImg.setAttribute('src', document.getElementById("fileUpload").value);
    oImg.setAttribute('alt', 'na');
    document.getElementById("picDiv").appendChild(oImg);
}

Don't forget to check if the file is valid image or not, which I leave it upto you.

answered May 30, 2012 at 15:34

srijan

1,5221 gold badge13 silver badges25 bronze badges

3 Comments

ndesign11 Over a year ago

I am getting a 404 on the image. "NetworkError: 404 Not Found - localhost:8080/Logo4U/cropped.jpg" is there a reason why it's looking for the image in the root folder?

srijan Over a year ago

what browser are you targeting?

ndesign11 Over a year ago

All of them, but was initially testing in FF

Collectives™ on Stack Overflow

Using jquery with file upload form field

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related