0

I am using php mysql and uploading image using ajax( jquery). The image is being uploaded successfully but is not being dispalyed immediately, on reloding the page it displaying correctly.

The upload and display are working when I am using this code..

<?php
// Set the upload folder path
$target_path = "uploads/";
// Set the new path with the file name
$target_path = $target_path . basename( $_FILES['myfile']['name']); 

// Move the file to the upload folder
if(move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
// print the new image path in the page, and this will recevie the javascripts 'response' variable
echo $target_path;
} else{
// Set default the image path if any error in upload.
echo "default.jpg";
}

?>

But instead of uploading the image to upload directory with the original name of the image which is being uploaded I want to change the name on upload to image01.jpg and if the image with this name is present then I want it to get replaced with the new one. For this I use this code...

<?php
// Set the upload folder path
$place_file="";
$target_path = "1/";
$target_path1 = "1/image01.jpg";
// Set the new path with the file name
$target_path = $target_path ."image01.jpg"; 
// Move the file to the upload folder
$place_file=move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path1);
echo $target_path;
?>

The image is uploding fine but it is not being displayed immediately but gets displayed on page refresh. It displays the previous image only and I think the replacing of image is causing a problem.

I am new in file uploading coding thats why having problem.

This js code uploads the image

    new AjaxUpload(button,{
    action: 'upload.php', 
    name: 'myfile',
    onSubmit : function(file, ext){
        spinner.css('display', 'block');
        // you can disable upload button
        this.disable();
        },
    onComplete: function(file, response){
        button.stop(false,true).fadeOut(200);
        spinner.css('display', 'none');
        $('#profile_img').attr('src', response);
        // enable upload button
        this.enable();
    }
});

The above php code was upload.php

hritik watts
  • 67
  • 8
  • Your Problem seems to be in the JS-Part... please post your JS-Code... – mineichen Oct 29 '12 at 09:46
  • no no js is same for both of them ........anyways I am posting the code... – hritik watts Oct 29 '12 at 09:47
  • $('#profile_img').attr('src', response); wont update your image. Have a look at http://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url – mineichen Oct 29 '12 at 10:11
  • @MarkusI. That bcoz of the cache ?? But I used the solution of that question by using $('#profile_img').attr('src'+ new Date().getTime(), response) ; But it also does not work....and btw the first soln I gave in the php is working and having no caching problem with the same js code.... – hritik watts Oct 29 '12 at 10:15
  • @MarkusI. I got it because the first php solution takes the original name of the image which is uploaded and the second solution changes the name and replaces the original file thats why it is not working...but why.?? – hritik watts Oct 29 '12 at 10:18
  • 1
    You made a important mistake: You shouldn't add the date to the attributename. It must be a http-get parameter of the image-source... Try: $('#profile_img').attr('src', response + '?' + new Date().getTime()) ; – mineichen Oct 29 '12 at 10:57

0 Answers0