but a problem is occuring while uploading....
error: file not uploading on ajax call
here i attached the code please read and help if possible.
javascript code:
<script type="text/javascript">
$(function() { //creating function which occurs on clicking the submit button
$(".styled").click(function() // submit button has class "styled"
{
var element = $(this);
var boxval = $("#uploadfile").val(); //<input type="file" name="uploadfile" id="uploadfile">
var dataString = 'uploadfile='+ boxval; //getting value from "uploadfile"
if(boxval=='') //if user didn't upload anything but click on submit button then it send warning msg
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show(); //else call the show function to show the uploaded image in "flash" <div>
$("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>'); // it show "loading update" on screen
$.ajax({
type: "POST",
url: "xxxxxxx.php", //this is the file name which contains the php script to submit info
data: dataString,
cache: false,
success: function(html){
$("ol#update").prepend(html); //hiding the <div>
$("ol#update li:first").slideDown("slow");
document.getElementById('uploadfile').value='';
$("#flash").hide();
}
});
}
return false;
});
$('.delete_update').live("click",function() //ignore this part of code is for deleting the image file
{
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
if(confirm("Are you sure?"))
{
$.ajax({
type: "POST",
url: "XXXXx.php", //file which was called by ajax on click the submit button
data: dataString,
cache: false,
success: function(html){
$(".bar"+ID).slideUp('slow', function() {$(this).remove();});
}
});
}
return false;
});
});
</script>
html code :
<form method="post" action="" enctype="multipart/form-data" >
<input type="file" name="uploadfile" id="uploadfile">
<input type="submit" class="styled"" value="Upload" id="upload">
</form>
//code for displasying the uploaded image without refresh "html code" <div>
div style="height:7px"></div>
<div id="flash" align="left" ></div>
<ol id="update" class="timeline">
</ol>
<div id="old_updates">
</div>
php code for submitting the image path into mysql database:
<?php
include('config.php');
$folder = "uploads/"; //name of directory for uploaded images
$name = $_FILES['uploadfile']['name']; // getting filename from uploading image
$target_path=$folder.$name; // creating the full path of uploaded image
$tmp = $_FILES['uploadfile']['tmp_name']; //temp directory
$q="select fullname,profile_image from <table_name> where email='$login_session'"; //mysql_query
$r=mysql_query($q) or die(mysql_error());
$row=mysql_fetch_array($r);
$fullname=$row['fullname']; //getting fulll name from master table
$profile_image=$row['profile_image']; //getting profile image from master table
if(move_uploaded_file($tmp,$target_path)) //checking if image is uploaded or not? if uploaded then
{
//inserting full image path into mysql table
$query="insert into <table_name>(name,image) values('$login_session','$target_path') ";
$result=mysql_query($result) or die(mysql_error());
$r=mysql_fetch_array($result);
$msg=$r['$target_path'];
$msg_id=$r['id'];
}
else
{
echo "Error occuring in uploading this photo";
}
?>
//html code for displaying the uploaded image into <div> in front page
<head>
<style type="text/css">
.stimg
{
float:left;
height:50px;
width:50px;
border:solid 1px #dedede;
padding:3px;
}
.big_face
{
width:50px;height:50px
}
</style>
</head>
<div class="bar<?php echo $msg_id; ?>">
<div class="stimg">
<img src="http://www.XXXXX.com/<?php echo $profile_image ?>" class="big_face"/>
</div>
<br/><br/><br/>
<p><b><?php echo $fullname ?>:</b></p>
<div align="left">
<span > <img src="http://www.XXXXX.com/<?php echo $target_path ?></span>
<span class="delete_button"><a href="#" id="<?php echo $msg_id; ?>" class="delete_update">X</a></span><br/>
</div>
</li>
<br/><br/>
</div>
I tried a lot . help please
