Upload image using jquery and iframe "Method"

PHP
1

Hi everyone, i need some help with the theory to complete my upload system.

Well i have two files, the first with html code and some php code and the last with all php code to upload the image, it is some like it:

File1.php


<?php
    require_once 'config.php';
?>

<!DOCTYPE html>
<html>
<head>
<script src="js/code.js"></script>

</head>
    <body>
        <form id="" action="upload_image.php" method="post" enctype="multipart/form-data" target="upload_target">
            <div id="PhotoInsert">
                <input id="file" type="file" name="file"/>
            </div>
            <div id="">
                <input id="submit" type="submit" name="submit" value="Submit"/>
            </div>
            <iframe id="upload_target" name="upload_target" src=""></iframe>
        </form>
    </body>
</html>

upload_image.php


 Well this file have the code to upload image to database, it is working great.

Well the upload image is working, now i need to, when i upload the image to the database the upload_image.php return the image url to the iframe and then it will pass to a image src. it will work with ajax, i click on the button (submit) inside of the form and then it will run the upload_image.php code it will send the image to server and will return the image URL and now i dont know how i should do from here to the front, i want to return this URL get it and show that URL inside of a img tag that will be created using jquery. Any tips?

Thanks community :slight_smile:

2

Hi
Try this ideea.
In the main page create a function that receives the url and adds it in the image src.
Edit the php to return in iframe a JS script that accesses the function created in the parent page, passing the url, something like this:

echo '<script type="text/javascript">
parent.function_name('. $url. ');
</script>';
3

Yeh i was thinking in that idea but i dont know how i can get the value from the update_image.php file in the first file using jquery.

Can give me some help with that? later i think that i can complete the rest of all code.

Thanks for the tip :slight_smile:

4

In File1.php :

<script type="text/javascript">
function addSrc(url){
  $('img#image_id').attr('src', url);
}
</script>

In update_image.php, add this echo to return in iframe the JS script with the image url in the called function:

echo '<script type="text/javascript">
parent.addSrc('. $url. ');
</script>';
5

Well a last doubt. the function on the file1.php, how can i put it on this file1 to only run when the update_image.php is completed… click on submit button it run the image_upload.php file and when it is completed it will run the javascript function.

Thanks so much for the help MarPlo

6

The function in file1.php will be executed only when it is accerssed, so, only run when the update_image.php is completed and outputs the JS script that calls the function.

7

Yeh it is working, but it only work great on upload_image.php if the $url is numeric, i test some like that $url = “sf”;
and it give me a error, it says:
Uncaught ReferenceError: sf is not defined