 |  |  |  |  |  |  |  |
Loading image to HTML
Please support our JavaScript / DHTML / AJAX advertiser: 50% Off 6 Months Web Hosting from 1&1. The World's #1 Host!
 |
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]
<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>
[/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:
[html]
<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>
[/html]
My code doesn't load images. Please explain me why
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]
<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>
[/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:
[html]
<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>
[/html]
My code doesn't load images. Please explain me why
•
•
Join Date: May 2004
Posts: 1,478
Reputation: 
Solved Threads: 18
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.
<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".
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
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
Last edited by Razma; Nov 30th, 2006 at 5:13 pm. Reason: editing so i can so replys come to my email addy
•
•
Join Date: Jul 2006
Posts: 1,091
Reputation:
Solved Threads: 63
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
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
Last edited by MattEvans; Dec 1st, 2006 at 5:41 am.
Plato forgot the nullahedron..
|
Similar Threads
- Loading Image in c (C++)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Javascript syntax '' within '' (simple question)
- Next Thread: Javascript - how to stop/halt/break this loop/script plss
Views: 6089 | Replies: 8
| Thread Tools | Search this Thread |
Latest JavaScript / DHTML / AJAX Posts
- Today's Posts
- Unanswered Threads
Related Forum Features
Tag cloud for JavaScript / DHTML / AJAX
8 ad ajax ajaxcode ajaxhelp ajaxjspservlets animate api array asp asp.net autoplay box boxes bug captchaformproblem catch close code content cookies css date dependent design div dom draganddrop dropdown dynamic element embed error eventhandlers events explorer ext file firefox firehose flash focus font form forms function gears google gxt hide html ie7 iframe image image() internet internet-explorer java javascript javascripts jquery js libcurl lists load maps modal mp4 mysql onclick onmouseover parameters paypal php player position post resize reveal script scroll scrubber search select show simple size smarty source sources text textbox twitter unicode validation variables web webkit window xml
