display a picture

[habbardone]

i still have problems with - anyone any ideas ? ...

....
I am continuing to build my form which has some
pictures in it to upload.

What I would like to do is show the pictures before all the data and
the images are uploaded so that the operator can be sure that
the pix files are the correct ones.

I am thinking of using a button with

onClick=" ?? don't know "

• but the idea is to use<img src="the_pix_file_name" />

But how do I get the file name that was selected by the
browse button or typed into the pix input box before it is
uploaded to the server ?

Since the input is done client side. I guess there must be a way
of js knowing the file name and displaying it ?

Heres the code I have:

<form enctype ="multipart/form-data" action="upload.php" method="POST">

...there four other pictures plus a load of other inputs then...

...the 5th pix ...

<tr><td class = "cl_props_add_td3" >Pix 5: </td>
<td><input type="file" name="pix5" size="30"></td>
<td class = "cl_props_add_td3" style="text-align: right">Caption 5: </td>
<td><input type="TEXT" name="cap5" size="30" maxlength="50"></td>
</tr>
<br>

</table>
</div>
</div>

SOMEWHERE ABOUT HERE A BUTTON AND JAVASCRIPT ??
TO DISPLAY THE FIVE PICTURES

<div id='Props_add' style='position:absolute; left:630px; top:328px' >
<table summary="">
<tr><td><input type="submit" name="upload" value="Upload Data"></td></tr>
</table></div>
</form>

any ideas ?

[dewen]

do you mean you are trying to display the users a local image on their browser?

[habbardone]

yes - thats it -

must be dead easy !- but how do I get what they key into the input box into an
<img src= > tag ?

[dewen]

what I used to do is after use typed in a file name, the form submit by a javascript, from the server side, you out put the tag <img ... src="path\to\imagefile" ...>

this is not a safty way since user may type in a wrong file name, result in a missing image on browser.

I don't think the javascript can do the local file operate, otherwise, every one can load other people's local file thru HTTP.

In you case, you may need to try activeX program, which installed on local pc and have access to the file system

[dewen]

Also try this:

<form name="f">
<input type="text" name="t"><BR>
<input type="button" onclick="alert('file:\\C:\shared\'+f.t.value);f.g.src='file:\\C:\shared\'+f.t.value" value="UPDATE"><BR>
<img name="g" src="file:\C:\shared\0233F12.jpg"><BR>
</form>

"C:\shared\" is a pre defined path

user need to type image name like "0233F01.jpg", then click the update button

works on IE6