1 Replies - 3313 Views - Last Post: 23 November 2012 - 02:57 AM

#1 Scott M  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 14-November 12

Dynamic Website - Adding images to post/form on the fly.

Posted 16 November 2012 - 03:29 AM

Looking for a little help on attaching images to a post (making my website easy to put updates on).

I have made a very simple form with "Heading", "Category and "Body" fields. I then have another page for uploading images.

What I want to do is be able to fill in the heading, category and body fields and then click on "attach pics" to add pictures to the post. At the moment I can easily upload multiple images via the popup window but the trouble I'm having is that when I close the popup for attaching images I have no way of linking them to the current post.

I've seen this done on the fly on many forums and I'm just wondering how its done and if it's easy enough to implement.

EG on this very forum I can click "choose file", select a file and attach it to this post. All the while none of the information I have typed is lost.

Is it a case of creating a temporary table to store the information and then refreshing the page once the upload is complete? Is there another way around this issue?


Is This A Good Question/Topic? 0
  • +

Replies To: Dynamic Website - Adding images to post/form on the fly.

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: Dynamic Website - Adding images to post/form on the fly.

Posted 23 November 2012 - 02:57 AM

Hello there,

The way I achieved this on a site not so long back is as follows..

We'll call your page A. Inside A I had a form with various fields and an 'Attach image' button. Hidden on the A page was iframe which had it's source set to a PHP upload script we'll call B.

On B there was a form with a file field and a submit button. When you click 'Attach image' on A, it provoked a Javascript function inside B that triggered a click on the file field, opening a file select screen for the user.

Monitoring the onchange event for the file field, I could detect when they had selected a file. When this happened, B would automatically submit itself and upload the file (submission was done by clicking the submit button as IE had issues when I just submitted the form with JS).

Now, for the purposes of my application I wanted to show the image on page A after it had uploaded, so the user was displayed a loading overlay while A monitored B every second until it had finished uploading.

When B had finished uploading, it had a provoker function that returned the path of the public-facing uploaded picture, when A could call this function, we got rid of the loading overlay and interjected the image into the page.

From the users point of view, they were given a small loading overlay while the image uploaded and then the image appeared without a page reload. This probably sounded ten times more complex that it actually is, so I do apologize if I rambled on.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1