Question

I want to have a user select a file and then have php put the contents in db. Now the last part (processing the file in php) is easy. But is there a way I can process a user selected file whithout a new page load?

If I use the following:

<FORM ACTION="upload.php" METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="somefile"><BR />
<INPUT TYPE="submit" NAME="submit" VALUE="Upload">
</FORM>

Page upload.php automaticaly loads after which I can insert the uploaded file in a database.

I would like to use a combination of javascript, php and xajax to process the file. I don’t think something like this is possible:

<FORM ACTION="javascript:xajax_proces_file()" METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="somefile"><BR />
<INPUT TYPE="submit" NAME="submit" VALUE="Upload">
</FORM>

Because the file is not uploaded when function xajax_process_file() is called. Or is it? I think I do not fully grasp the principle of uploads with javascript, html and php.

Any help and or clarification is much appreciated.

Answer 1

It may help to think of this as a two step process.

First, the user fills in the form and submits it – step one.

Second ( which is the default action ) the specified target file takes the input from the form and uses it to do whatever. You can almost think of a form “action” as a link – the default action of a link click is to display the result of the link. The same goes for a form action – display the result of a form action.

Now, it’s possible via JavaScript to disable the default action of an element for a particular event. It is also possible via JavaScript to access a browsers HTTP mechanism to send/receive HTTP request (which is what every page request is – whether from your URL bar or a page link or a Google search result).

And that is what AJAX in simple terms is – using JavaScript to use a browsers HTTP mechanism to send requests to a web server and possible receive a response back without the use of a traditional click event. You then combine this with the use of JavaScript to “turn off” default actions and instead follow the action specified by you to get information from a server and add it to the page without ever having to refresh the page.

Many times to prevent the defualt action from taking place for a certain element, you return false in your code. The same goes for your form. Using javascript:

form.onSubmit = function() {
  blah blah blah.....Use ajax to send the information to the form handler
  return false; //Prevents the defualt action of the submit event
}

If you are really new to AJAX, I suggest you check out this tutorial and then this one. Lastly, I would recommend using a Javascript framework like jQuery to help you – it is awesome and does alot of great stuff, but also has easy and built in functionality for AJAX.

Here is another tutorial to do a form submit with no page refresh (uses jquery).