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” />’);

$(“body”).append(iframe);

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());
form.submit();

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

return false;

});

});

</script>

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

<div id=”textarea”>
</div>

 

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

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

?>

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s