Member Avatar for tqmd1

Dear Sir,

I have following codes

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><title>My Contacts</title>

    <style type="text/css">

    body{
        margin-top:200px;
        font-family:Georgia, "Times New Roman", Times, serif;
        }

    </style>
    </head>

    <body>
    <center>
    <img src="Photo96.png"><br/>
    <a href="">Get Photo</a>
    </center>
    </body>
    </html>

It shows this image

[IMG]http://i40.tinypic.com/141saa0.jpg[/IMG]

I want to upload a new picture with pressing Get Picture link.
There should be image selector dialog box to select image file then show in picture box.

No matter what method is atopt, Javascript, Jquery, Ajax and whatever.

Please help

  • 2 Contributors
  • 9 Replies
  • 185 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for diafol

Have you searched for upload codes? You'll need a back-end technology like PHP to store the image.

I want to upload a new picture with pressing Get Picture link.

I'm assuming that this link will either lead to or show a html file control. There are plenty of examples online as to how to set this up. Just a word of advice - use the enctype="multipart/form-data" in the <form> tag, otherwise nothing will be uploaded to the tmp directory.

Member Avatar for tqmd1

Sir I want to show new picture where current picture is shown.

Do not want to upload anywhere.

Member Avatar for diafol

Do not want to upload anywhere.

But you said...

I want to upload a new picture

Confused :(

Member Avatar for tqmd1

That was my mistake, sorry

Member Avatar for diafol

Sir I want to show new picture where current picture is shown.

From where? Already uploaded or an image on otherr sites?

Member Avatar for tqmd1

From Hard Disk.

Member Avatar for diafol

If your image is on the hard disk (and outside the site's local directory), then you do need to upload, even if the site is 'hosted' on your hard drive. When your site goes live (I'm assuming you're still on local server - localhost), then this is what you'll need.

So traditionally, to upload an image to a directory on your localhost you need the following:

1) An file control in a form with enctype property of the <form> set to 'multipart/form-data'
2) An upload processing routine ('moving' the file from the 'tmp' upload directory to a specified location)

These days, Ajax is everywhere and ajaxified uploads are in vogue - just check out dropbox to see what I mean. This functionality can be replicated by a number of 3rd party plugins or classes. A list of 10 popular ones can be found here:

http://blog.insicdesigns.com/2010/02/10-best-ajax-file-uploader-for-your-web-application/

You'll still need the back-end processing of 2) though. Some of these even allow multiple file uploads.

Processing routines can be found here: https://www.google.co.uk/search?q=upload+file+php&oq=upload+file+php&aqs=chrome..69i57j69i60l3j0l2.4420j0j4&sourceid=chrome&espv=210&es_sm=93&ie=UTF-8

Tizag's is probably the most accessible and has been quoted as the standard many times, although it's pretty much what you find in the php.net manual.

If you have a look at a couple of these, then come back with exactly what you need, if these links don't explain it sufficiently.

Member Avatar for tqmd1

Sir, Now I have these codes, working more than 70%.

These codes upload image file but does not display in iframe.

It needs your little help more please

Thanks

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
          <title>My Contacts</title>
          <style type="text/css">
             body{
             margin-top:200px;
             font-family:Georgia, "Times New Roman", Times, serif;
             }
          </style>
       </head>
       <body>
          <center>
             <div id="picdisplay">
                <iframe id="display" name="display" width="100" height="100" seamless src="Photo96.png"></iframe>
                <input type="file" id="upload" name="upload" style=" width: 1px; height: 1px" multiple />
                <a href="" target="display" onclick="document.getElementById('upload').click(); return false">Upload</a>
             </div>
          </center>
       </body>
    </html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.