CODEWITHSUNDEEP
phpajax
Jose Vega
Jose Vega

Reputation: 10258

Submit HTML form type file with AJAX

I have a form and a div. I want the user to select an text file and hit submit and that will populate the div with the content of the file. I would like to do that without having to refresh the page.

<form action="action.php" method="post" enctype="multipart/form-data">
Click the "Choose File" button and browse for the file to import.<br /><br />
<input type="file" name="filelocation" value="Browse" /><br />
<input type="submit" name="submitform" value="Submit" />
</form>

<div id="filecontent">

</div>

Upvotes: 1

Views: 1967

Answers (2)

Michele
Michele

Reputation: 6131

Theres is no easy way to do that, but u can use an Iframe with an ajax call to get your file to the server and work with it the normal ajax way

<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
File: <input name="myfile" type="file" />
<input type="submit" name="submitBtn" value="Upload" />
</form>

look at target="yourhiddeniframe"

here is a complete howto: http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

greetings

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382656

There is no easy way to submit/upload the files via ajax. However, you can go for the jQuery Uploadify plugin to the trick for you.

Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.

Upvotes: 2

Related Questions