Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

upload file to server with ajax

3:03 am on Dec 17, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Feb 26, 2010
votes: 0

hitting a road block on this.

what I have so far:

<input id="newFile" type="file"/>
<span style="background-color:orange;" onClick="newImage()">HEYTRY</span>

This is obviously not very far.

I am looking for a basic way to load this image into a variable, convert the variable to something passable via a URL and then accomplish my goal.

not as easy as I anticipated.

any help would be great.

5:13 pm on Dec 17, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
votes: 30

I think you'll need to be more specific about what you're trying to do.

If the image file will ultimately be transferred from the user's computer to the website's server, you'll need some software on the server to process and store the file. If you just need to let the user select an image file from his computer and perform some operation on that image on the page with JavaScript, I can imagine ways that you could do that. But you haven't given enough information yet.
2:45 pm on Dec 18, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Feb 26, 2010
votes: 0

thanks. just had the chance now to circle back to this question.

I have come across a sample "post" implementation. the only aspect of this that I am not understanding is how to pass the (file)Object form the input form (with type="file").

the code below seems to be a good start.

basic steps of what i am trying to do:
1 - have input form of type="file" on user page
2 - user clicks "browse" to select file on their local machine
3 - user clicks "upload" button
4 - js script is executed that takes the selected image, pushes it to a php script via ajax that handles the uploading work.

See below for a sample script I found:
function post_to_url(path, params, method) {
method = method || "post"; // Set method to post by default, if not specified.

// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);

for(var key in params) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);


document.body.appendChild(form); // Not entirely sure if this is necessary

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members