Hi, I am relatively new to Javascript, but I think it is possible to do the following, but I don't know exactly how. I have a screen with 10 images in screen A. When the user clicks an image, a file upload box needs to pop up (screen B) where the user can change the image (<input type="file"). Once they click "Upload", the upload proceeds, and when it is done, the image is uploaded or an error message displayed in the parent screen (screen A) with the 10 images and screen B disappears. I seem to think that using iFrames might be a solution. Is that true or is there a better way? Any help will be greatly appreciated!
That's a large project, involving alot of ajax. The best way to do this, in my opinion, would be to place the images inside of div tags (or inside of a table if you want them laid out horizontally, just give the TR tags each a unique ID), then wrap each image in javascript links (a href=javascript:function() ). You wanted a popup window, though I would suggest a GreyBox, http://www.orangoo.com/labs/GreyBox/, it makes your site alot more nice looking and dynamic. Then use ajax to upload the image, once it's uploaded have the upload script echo a smaller version of the image, and use the innerhtml method to set the correct div tag (or tr) to the new image. Again this is a huge endeavor otherwise I would have supplied more code. . .
Thanks a lot ToddMicheau for the info! I think too that GreyBox is a great idea. Do you know of any good website where I can learn more about AJAX and file uploads? I can of course check this myself, but in case you know of any off-hand, that will be a great help
W3schools is a very good website if you just starting out- http://www.w3schools.com/ajax/ajax_intro.asp But after that google is a great tool for looking up more specific functions. As for file uploading I would suggest using PHP for that, create a simple script that checks the refering web page and uploads, after it's uploaded have it echo the html to embed the img, so that you can use ajax's innerhtml to set the div to display the image. This page will tell you step by step what each command does for uploading. http://www.tizag.com/phpT/fileupload.php Using a php script to dynamically echo the required table/div tags might be something you'll want to look into, if you know php well enough.