Board index   FAQ   Search  
Register  Login
Board index php forum :: php coding PHP coding => General

Problem occuring in image upload using ajax

Ask about general coding issues or problems here.

Moderators: macek, egami, gesf

Problem occuring in image upload using ajax

Postby suchait24 » Thu Jan 24, 2013 5:09 am

hey friends I'm working on project in which i have to create application in which user can upload their images ,
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">&nbsp;<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>
&nbsp;&nbsp;<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 :( :(
suchait24
New php-forum User
New php-forum User
 
Posts: 3
Joined: Thu Jan 24, 2013 4:50 am

Re: Problem occuring in image upload using ajax

Postby satalways » Thu Jan 24, 2013 6:43 am

Dear suchait,

You can't post file using normal ajax functions. You've to use any plugin or you can also use iframe for uploading files..

See the example http://www.uploadify.com/

I hope, it will help you.
satalways
New php-forum User
New php-forum User
 
Posts: 5
Joined: Thu Jan 24, 2013 6:39 am
Location: Lahore, Pakistan

Re: Problem occuring in image upload using ajax

Postby suchait24 » Thu Jan 24, 2013 9:39 am

hey satalways
thank you so much for your reply....

yeah you're right i have to use iframe for that..... now i implemented the iframe ...
problem was solved now ..

thnx again :) :)
suchait24
New php-forum User
New php-forum User
 
Posts: 3
Joined: Thu Jan 24, 2013 4:50 am


Return to PHP coding => General

Who is online

Users browsing this forum: Google Feedfetcher, ScroogeMcDuck and 2 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.

cron