Load image selected by the user on webpage
<p>I have a form. To make it a simple, the only element in the form is a file upload:</p>

<pre><code>&lt;form name="MyForm" action="upload_file.php" enctype="multipart/form-data" method="post"&gt;
    &lt;input type="file" name="file" id="file" size="40"&gt; 
    &lt;button type="button" onclick="draw()"&gt;Refresh&lt;/button&gt;
    &lt;input type="submit" name="upload" value="Upload"&gt; 
&lt;/form&gt;
</code></pre>

<p>And in upload_file.php I retrieve the parameters the usual way.</p>

<p>On my webpage there is a default image </p>

<pre><code>&lt;img src="Images/default_icon.png" width="70px" height="70px"/&gt;
</code></pre>

<p>I want to replace this image with the one the user selects from the Choose File dialog and (I guess it's necessary) presses the Refresh button. The user can upload as many files as he wants, and when he is finally satisfied with the image (only the last uploaded can be seen of course) he presses the upload button which takes him to the next webpage and uploads the image to the server.</p>

<p>I don't have much knowledge in web programming, but I think I know that I have to upload the images to a dedicated folder, because I cannot retrieve and use the path of the image on the client's machine. Then I can download the image from the server and load it something like this:</p>

<pre><code>$url = '/upload/'.$_FILES["file"]["name"]; ///upload/icon.jpg
</code></pre>

<p>and</p>

<pre><code>&lt;img src="&lt;?php echo $url; ?&gt;" width="70px" height="70px"/&gt;
</code></pre>

<p>Please help me with this or redirect me to a decent tutorial.
An explanation on how this works in practice is also appreciated.</p>

<p>Thanks</p>
