•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 374,021 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,782 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 3226 | Replies: 8
 |
•
•
Join Date: Jul 2006
Posts: 16
Reputation: 
Rep Power: 3
Solved Threads: 0
Newbie Poster
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
Location: Boston,MA
Posts: 1,359
Reputation:
Rep Power: 7
Solved Threads: 16
its probably becuase you need to load an <img src=""> to display an image in html.
•
•
Join Date: Jul 2006
Posts: 16
Reputation:
Rep Power: 3
Solved Threads: 0
Newbie Poster
•
•
•
•
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 ?
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
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".
•
•
Join Date: Jul 2006
Posts: 16
Reputation:
Rep Power: 3
Solved Threads: 0
Newbie Poster
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.
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
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".
•
•
Join Date: Jul 2006
Posts: 16
Reputation:
Rep Power: 3
Solved Threads: 0
Newbie Poster
•
•
•
•
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
•
•
Join Date: Nov 2006
Posts: 1
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Re: Loading image to HTML 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
Location: Deptford, London
Posts: 916
Reputation:
Rep Power: 5
Solved Threads: 46
Posting Shark
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.
If it only works in Internet Explorer; it doesn't work.
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- 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
