Yes I can show you how.

I am gonna tell you how the original script and my modification work.

When you click a file name to upload, files/images are sent to and stored in server, “pic” folder. During this storing process, you capture the file name by PHP, then send the name back to browser, put it in the “src” attribute, that’s how you have image displayed on browser immediately.

But, you have to resize the image to make it look nice and neat on browser, right? Therefore, before sending the file name back to browser, you have to resize the original image with PHP and rename with key word “thumb” attached to the original name, then store the thumb image in the same folder with original image. There u have the thumb now.

To remove, during storing and resizing process, you send the id or the name of original image to browser and store it in JavaScript variable or in one of the element’s attributes, its your choice. So when u click remove link, you will get the name which was stored in browser, send to server, this is when server know what file name you want to delete. Meanwhile, in your Javascript code, put a snippet to hide/remove the link element and image element from browser view.

Hope that makes sense. Anyway, if it’s too hard to figure out, you can contact me at craigcosmo@gmail.com to get the script.

Is there any way you can share how you were able to implement the thumbnail and remove features? I tried it out, and it looks awesome!

Thanks,
Selina

http://www.diepbachduong.com/index.php/play/img

A thumbnail preview of uploaded image would be nice.