I'm looking for a way to display a "preview" of the file that's getting uploaded using the forms. Forms have these fields: Date, name, author, description and upload file (files are stored on database). The type of files that are getting uploaded are: PDF, DOC, XLS, JPG, GIF, MPG4 and SWF.

The idea is that on the HTML pages, other than the other info, visitors are also able to see a small "preview" of the uploaded file.

There is not any really good answer for this question, especially if you want to accomplish this in real time. If you have a web page that displays the information you may be able to get something from this site. It has worked for me in the past, though not in real time.http://www.shrinktheweb.com/

My general recommendation for something that can provide a fairly good UX would be to have 32x32 pixel icons that represent the different types of files. You can display the icon and make it a link to a new window that access the uploaded file. The client already knows what she uploaded, and the icon and link serve to provide an easy way to verify that the upload worked correctly.

Failing that you might be able to try to stuff the uploaded file into a small <div> or iframe. But I do not think I would be comfortable with that approach.

Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.

The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…