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
