使用ajax和PHP上传图像（预览不起作用）

Question

I have the following HTML

<tr id="all_extended">
    <td id="portrait">
       <img id="image" <?if($image != NULL) echo "src='$image'"?>></img>
    </td>

and JAVASCRIPT

$("#this_upload_is_working").ajaxForm({
                        target: '#image'
        }).submit();

But for some reason the image only appears if I refresh the page instead of instantly as it should. Any idea on why? And if so, any suggestion on how I can make it fadeIn with jquery?

Answer 1

PHP is server side. Therefore, that is why this only works on refresh:

<?if($image != NULL) echo "src='$image'"?>

The above code has many errors as well, and should be written closer to this:

<?php if($image != NULL){echo "src='.$image.'";} ?>

You will have to do a couple things here;

1) Upon submission of the image, you will have to build a Javascript/jQuery function that sends the image to a PHP function that stores it on your server (You don't necessarily need to use a database to store the image, so long as you store the image URL in the database for referencing record ie yourwebsite.com/img.jpg).

2) The PHP script will then return the image URL where the image is stored.

3) The client will then receive the URL where the image is stored, and you can populate your img src with the proper image URL, without refreshing the page.

I am trying to be a good attentive boyfriend to my girlfriend tonight, otherwise I would write example more scripts for you :( The good news is that with the outline of steps described above, you can learn and study enough to get really good at this type of programming!

Cheers and keep on truckin'! I hope this helps!

Answer 2

<img id="image" <?if($image != NULL) echo "src='$image'"?>></img>

Your code work after page refresh because image src populated from response value.

I guess your problem is instant image preview, if so then you can check this answer Preview an image before it is uploaded . If you browse any image you'll get the preview immediately.