Jquery code for file upload without plugin

In this Post i show you how to upload file  using jquery .

There is simple way.

Step 1 : Create the Upload  page


<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.2.min.js”></script&gt;
<script type=”text/javascript”>

$(document).ready(function () {

$(“#formsubmit”).click(function () {

var iframe = $(‘<iframe name=”postiframe” id=”postiframe” style=”display: none” />’);


var form = $(‘#theuploadform’);
form.attr(“action”, “upload1.php”);
form.attr(“method”, “post”);
form.attr(“enctype”, “multipart/form-data”);
form.attr(“encoding”, “multipart/form-data”);
form.attr(“target”, “postiframe”);
form.attr(“file”, $(‘#userfile’).val());

$(“#postiframe”).load(function () {
iframeContents = $(“#postiframe”)[0].contentWindow.document.body.innerHTML;

return false;




<form id=”theuploadform”>
<input id=”userfile” name=”userfile” size=”50″ type=”file” />
<input id=”formsubmit” type=”submit” value=”Send File” />

<div id=”textarea”>


Step 2 : create the processing page that is used for upload a file.
$tmp_name = $_FILES[“userfile”][“tmp_name”];
$name = $_FILES[“userfile”][“name”];
move_uploaded_file($tmp_name, “picture/$name”);

echo “<img src=’picture/$name’ />”;



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s