SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy how to preview an image in preview page before it is uploaded to the server?

    hi, i wish to preview the image that user wish to upload before it is uploaded to the server.

    in the form:
    Code:
    <form method="post" action"upload.php" enctype="multipart/form-data" >
    <input type="file" name="photo">
    </form>
    in the previewpage, i put the code as below:
    Code:
    <img src="<?php echo $photo?>">
    however, it is not working...

    how to preview an image in preview page before it is uploaded to the server?
    newbie...really need your guidance......

  2. #2
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP is on the server side so it has no access to the client, the user&#180;s PC/browser. But where is the problem with uploading first and then displaying it on the preview page?

    Maybe you are interested in this chapter from the PHP manual.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh, i wish to let the user to preview it before the it is uploaded to save my space... or else, there will be many mis-uploaded photo in my server...

    do you have any other suggestion for me???

    thank you!
    newbie...really need your guidance......

  4. #4
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    - upload via the form to a directory called temp_pics or something
    - you can display it on the preview page with <img scr="...
    - the user doesn´t like it -> unlink()
    - the user likes it -> copy() or rename() to the directory user_pics

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oerdec View Post
    - upload via the form to a directory called temp_pics or something
    - you can display it on the preview page with <img scr="...
    - the user doesn´t like it -> unlink()
    - the user likes it -> copy() or rename() to the directory user_pics
    oh... ok! thanks for your suggestion!!! i'll try it out now~
    newbie...really need your guidance......

  6. #6
    SitePoint Member
    Join Date
    Jul 2006
    Location
    jhb, south africa
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oerdec View Post
    - upload via the form to a directory called temp_pics or something
    - you can display it on the preview page with <img scr="...
    - the user doesn´t like it -> unlink()
    - the user likes it -> copy() or rename() to the directory user_pics
    And with safemode enabled? Surely you cannot delete the file if safemode is enabled?
    whatever the mind
    can conceive and believe
    it can achieve

  7. #7
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Safemode? I would first see if my suggestion works. If not I would check the attributes of the dir ...

  8. #8
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should try to use Javascript here. PHP is a server-side and runs code only on server. Javascript is client-side, so it runs code on user's machine.

    You could use some of this:
    HTML Code:
    <script language="Javascript">
    function _load_(path)
    {
    	document.body.innerHTML += "<img src=\"file://" + path + "\" border=\"1\" />";
    }
    </script>
    
    <input type="file" id="asd" onclick="_load_(this.value);" />
    It's just a poor example, you can develop from this.

  9. #9
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Julian, what happens when the user would like to upload the file - is it necessary to push the button a second time? And how to avoid uploading on the first click? I mean pushing the button will upload the file and execute the JavaScript function... don&#180;t get me wrong I think using JavaScript for this is a good idea but in my opinion a little bit more is needed to get it working.

  10. #10
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oerdec, it's not necessarily to click browse twice. You just have to click the submit button, link or whatever that uploads file. Javascript I've posted it just inserts an img tag that searches for picture selected when browse button was clicked. Correct me if I'm wrong.

    Ofcourse that you have to check whether the file selected is an image, add attributes width and height to img tag, append it where we want on the document. We can do a lot of things to display it nice.

  11. #11
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @julian: are you sure this works? Firefox (Mac) displays a security violation in the Error console when I test this code.
    Can you post a working example, 'cause I'm very interested in this method!

  12. #12
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ize View Post
    @julian: are you sure this works? Firefox (Mac) displays a security violation in the Error console when I test this code.
    Can you post a working example, 'cause I'm very interested in this method!
    I am sorry for my delayed replay.
    What I posted is functional on Firefox and IE6. In IE7 it does not return path for file. I'm sure it can be done on IE7 too. Just post a topic in Javascript section. They should know.

    In IE7 does not work because onclick event it is executed right after clicking browse button. In Firefox and IE6 onclick is executed only after file was selected and clicked open.

    Code:
    <html>
    <head>
    <script language="Javascript">
    function _load_(path)
    {
    	document.body.innerHTML += "<img src=\"file://" + path + "\" border=\"1\" />";
    }
    </script>
    </head>
    
    <body>
    <input type="file" id="asd" onclick="_load_(this.value);" />
    </body>
    </html>

  13. #13
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is used on Jostens' Yearbook Avenue website: javascript displays a preview of the image you just selected before it is uploaded to the server.

    As for your code: I'm not sure, but capitalization might count in the onClick. Change onclick to onClick. Otherwise, this.value might be your problem. You could use the full DOM to access it instead of this. Is there anything in the FF error console? Start there.

    --superuser2

  14. #14
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by superuser2 View Post
    This is used on Jostens' Yearbook Avenue website: javascript displays a preview of the image you just selected before it is uploaded to the server.

    As for your code: I'm not sure, but capitalization might count in the onClick. Change onclick to onClick. Otherwise, this.value might be your problem. You could use the full DOM to access it instead of this. Is there anything in the FF error console? Start there.

    --superuser2
    No superuser2, onClick and onclick makes no difference to the code. HTML is not case-sensitive. If you just try to "run it" you will see where the trouble is.

    By the way, all element and attribute names must be in lower case, says W3. Check this: http://www.w3.org/TR/xhtml1/#h-4.2.


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
  •