SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    File1.php
    PHP Code:
    <?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
    PHP Code:
     Well this file have the code to upload image to databaseit 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

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    echo '<script type="text/javascript">
    parent.function_name('. $url. ');
    </script>';
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    In File1.php :
    Code:
    <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:
    Code:
    echo '<script type="text/javascript">
    parent.addSrc('. $url. ');
    </script>';
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  5. #5
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  7. #7
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •