I have a form with an image file input and several other input controls. I want to preview the image in an image tag before actually uploading all of that to the database and the image to a directory in the server..

<link href="css/style.css" rel="stylesheet" type="text/css">

<div id="form" >

<form method="post" enctype="multipart/form-data">

<table border="0px">

<tr>

<td rowspan="10"><img id="poster" src="images/noposter.png" alt="[POSTER]"></td>

<td colspan="5"><br></td>

</tr>

<tr>

<td colspan="5"><br></td>

</tr>

<tr>

<td>Select Type</td>

<td><input type="radio" name="type" value="Movie"></td>

<td>Movie</td>

<td><input type="radio" name="type" value="Series"></td>

<td>Series</td>

</tr>

<tr>

<td>Name:</td>

<td colspan="4"><input type="text" name="name" id="input"></td>

</tr>

<tr>

<td>Release Year:</td>

<td colspan="4"><input type="text" name="releaseyear" id="input"></td>

</tr>

<tr>

<td>Genre:</td>

<td colspan="4"><?php include("categoryCombo.php") ?></td>

</tr>

<tr>

<td>Sequence/Series</td>

<td colspan="4"><input type="text" name="sequence" id="input"></td>

</tr>

<tr>

<td></td>

<td><input type="checkbox" name="justin"></td>

<td colspan="3">Just In</td>

</tr>

<tr>

<td colspan="5"><br></td>

</tr>

<tr>

<td colspan="5"><br></td>

</tr>

<tr>

<td><input type="file" name="file" id="file" ></td>

<td colspan="5"><br></td>

</tr>

<tr>

<td colspan="6" align="right"><input name="Reset1" type="reset" value="Reset" id="submit"> <input type="submit" name="submit" value="Save" id="submit"></td>

</tr>

</table>

</form>

</div>

<?php

include("connect.php");

?>