Hello people,
I have just started to learn JS, and have a question. I want make my script to load (for preview) an image file chosen by user through HTML form. My code is following:

<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Upload form</title>
<script language="javascript">
function preview() {
document.pic.src = document.Inputimage.userfile.value
}
</script>
</head>
<body>
<form name="Inputimage" id="Upload" action="action.php" enctype="multipart/form-data" method="post">
<h1>
Upload form
</h1>
<p>
<input name="MAX_FILE_SIZE" value="300000" type="hidden">
</p>
<p>
<label for="username">User name:</label>
<input id="username" name="username" type="text">
</p>
 
<p>
<label for="userfile">File to upload:</label>
<input id="userfile" name="userfile" onselect="preview();" type="file">
</p>
<br>
<img name="pic"><br>
<p>
<label for="usertext">Text displayed:</label>
<input id="usertext" name="usertext" type="text">
</p>
<p>
<label for="submit">Press to...</label>
<input id="submit" name="submit" value="Upload me!" type="submit">
</p>
</form>
</body>
</html>

The image loading process is done by preview() function. When user selects a file in "userfile" field, preview() invoking and loading this file for preview. I wrote it in these lines:

<script language="javascript">
function preview() {
document.pic.src = document.Inputimage.userfile.value
}
</script>
 
.................................
<input id="userfile" name="userfile" onselect="preview();" type="file">
 
..................................
<img name="pic"><br>

My code doesn't load images. Please explain me why

its probably becuase you need to load an <img src=""> to display an image in html.

its probably becuase you need to load an <img src=""> to display an image in html.

It doesn't work either way. I altered my code and added a special button to load image.
<input name="Preview" value="Preview picture" onclick="preview();" type="button">

This code works when i click a button. But i want an image to be loaded automatically, as user selects file.
There must be an error in this line:

<input id="userfile" name="userfile" onselect="preview();" type="file">

Why file's selection does not invoke preview() function ?

The "file" type uploads a file. You have to process the file which has been uploaded, via server-side code. I don't believe that the "onselect" attribute/event handler is meaningful for an input element of type "file".

I hadn't done good research on JS events before posted this question...There is onFocus event for "file" type, which occures whenever file input field is modified. The problem is solved.

That's not quite correct. The 'Focus' event fires when the control receives focus from the user. The event that fires when an element's value is changed is 'Change'. So, the event handler attribute you need is "onChange".

That's not quite correct. The 'Focus' event fires when the control receives focus from the user. The event that fires when an element's value is changed is 'Change'. So, the event handler attribute you need is "onChange".

onChange is better off... thanks tgreer for informing me about this one

Hi,
i got an upload form how do i have to process the file which has been uploaded, via server-side code. to show on a webpage

do you know an example code please

displaying a picture that a user "selects" by loading it into an image element using an absolute path to a file on the user's computer will only work in IE, and it will only work because IE is bad =P

to "get" the picture you can send the form to a PHP script, and it will be in the global $_FILES array, or you can use Perl, and strip the picture from the form-data by searching for Content-Delimiters (which are sent in the Form header). If none of that made any sense, I'd advise learning PHP (or better still, Perl =P).

PHP example:
http://www.phpfreaks.com/tutorials/36/0.php

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.