Upload image using jquery and iframe "Method"

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:


    require_once 'config.php';

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

        <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 id="">
                <input id="submit" type="submit" name="submit" value="Submit"/>
            <iframe id="upload_target" name="upload_target" src=""></iframe>


 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:

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. ');

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:

In File1.php :

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

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. ');

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

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.

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