JavaScript Tutorial/Form/FileUpload
Содержание
- 1 file Input Element
- 2 FileUpload
- 3 FileUpload.blur()
- 4 FileUpload.focus()
- 5 FileUpload.form
- 6 FileUpload.handleEvent()
- 7 FileUpload.name
- 8 FileUpload.onBlur
- 9 FileUpload.onChange
- 10 FileUpload.onFocus
- 11 FileUpload.select()
- 12 FileUpload.type
- 13 FileUpload.value
- 14 Second Method of Referencing FileUpload Object Using the forms Elements Array
file Input Element
<html>
<head>
<title>FileUpload Object</title>
</head>
<body>
<form method="POST" action="" enctype="">
File to be uploaded:
<input type="file" size="40" name="fileToGo" />
<input type="button" value="View Value" onclick="alert(this.form.fileToGo.value)" /></p>
</form>
</body>
</html>
FileUpload
The FileUpload object represents a file upload box within an HTML form. An upload box is created by using the HTML <input> tag and specifying the TYPE attribute as file.
The FileUpload object has specific properties and methods associated with it, which are shown in the following Table.
Property/Method Description blur() Removes focus from FileUpload box focus() Sets focus on FileUpload box form Reference form object containing FileUpload box handleEvent() Handles specific event name HTML NAME attribute for FileUpload box onBlur Event handler for Blur event onChange Event handler for Change event onFocus Event handler for Focus event select() Selects input area for FileUpload box type HTML TYPE attribute for FileUpload box value String specifying pathname of selected file
<html>
<head>
<title>Example using FileUpload object </title>
</head>
<body>
<script language="JavaScript">
<!--
function showname(){
var file = document.form1.uploadBox.value ;
document.form1.filename.value = file ;
}
-->
</script>
<form name="form1">
Click on browse to choose a file to send.
<br>
Click on the Send button to see the full path for the file sent.
<br><br>
File to send: <input type="file" name="uploadBox">
<br><br>
<input type="button" value="Send" name="get" onClick="showname()">
<br><br>
<input type="text" name="filename" size="40">
</form>
</body>
</html>
FileUpload.blur()
The blur() method is used to remove focus from the FileUpload box.
<html>
<head>
<title>Using the blur() method of the FileUpload object</title>
</head>
<body>
<script language="JavaScript">
<!--
function showMessage(){
document.form1.uploadbox.blur();
document.form1.textbox.value = "File Submitted";
}
-->
</script>
<form name="form1">
Enter Filename:
<input type="file" name="uploadbox">
<input type="button" value="Okay" onClick=showMessage()>
<br><br>
Confirmation:
<input type="text" name="textbox">
</form>
</body>
</html>
FileUpload.focus()
The focus() method is used to set focus to the FileUpload object.
<html>
<head>
<title>Using the focus method to set focus to FileUpload box</title>
</head>
<body>
<script language="JavaScript">
<!--
function checkFile(){
document.form1.uploadbox.focus();
document.form1.textbox.value = "Verify that filename is correct";
}
-->
</script>
<form name="form1">
Enter Filename:
<input type="file" name="uploadbox">
<input type="button" value="Okay" onClick="checkFile()">
<br><br>
Confirmation Message:
<input type="text" name="textbox" size=35>
</form>
</body>
</html>
FileUpload.form
The form property is used to reference the form object that contains the FileUpload box.
<html>
<head>
<title>Using FileUpload form property</title>
</head>
<body>
<script language="JavaScript">
<!--
function checkFiles(){
if (document.secret.file1.value == ""){
alert("You did not enter anything for file 1");
}
if (document.secret.file2.value == ""){
alert("You did not enter anything for file 2");
}
else {
alert("The files are okay and will be uploaded");
}
}
-->
</script>
<form name="secret">
Please choose two files to upload.
<br><br>
File 1:<input type="file" name="file1">
<br><br>
File 2:<input type="file" name="file2">
<br><br>
<input type="button" value="Verify" onClick="checkFiles()">
</form>
</body>
</html>
FileUpload.handleEvent()
Syntax
fileupload.handleEvent(event)
FileUpload.name
The name property represents the NAME attribute of the HTML <input> tag that creates the FileUpload box.
This allows you to reference a FileUpload object directly by name.
<html>
<head>
<title> Using the name property of the FileUpload object</title>
</head>
<body>
<script language="JavaScript">
<!--
function getname(){
var boxname = document.form1.myUploadbox.name;
alert("The name of the FileUpload box is: " + boxname);
}
-->
</script>
<form name="form1">
Click on the button below to get the name of the upload box.
<br><br>
<input type="file" name="myUploadbox">
<br><br>
<input type="button" value="Get Name" onClick="getname()">
</form>
</form>
</html>
FileUpload.onBlur
Syntax
onBlur="command"
FileUpload.onChange
Syntax
onChange="command"
FileUpload.onFocus
Syntax
onFocus="command"
FileUpload.select()
The select() method selects the input area of the upload field.
<html>
<head>
<title>Using select() method of the FileUpload object</title>
</head>
<body>
<script language = "JavaScript">
<!--
function enterName(){
document.form1.uploadbox.select();
}
-->
</script>
<form name="form1">
<input type="file" name="uploadbox">
<br><br>
<input type="button" value="Go to Filename Box" onClick="enterName()">
</body>
</form>
</html>
FileUpload.type
The type property represents the TYPE attribute of the HTML <input> tag used to create the upload box.
<html>
<head>
<title>Using the type property of the FileUpload object</title>
</head>
<body>
<script language="JavaScript">
<!--
function getType(){
var mytype = document.form1.uploadbox.type;
alert("The input box type is: " + mytype);
}
-->
</script>
<form name="form1">
<input type="file" name="uploadbox">
<br><br>
Click on the button below.
<br>
<input type="button" value="Get Type" onClick="getType()">
</form>
</body>
</html>
FileUpload.value
The value property specifies the filename of the file selected or input by the user.
<html>
<head>
<title>Using the value property of the FileUpload object</title>
</head>
<body>
<script language="JavaScript">
<!--
function showFile(){
var input = document.form1.uploadbox.value;
alert("The filename entered is: " + input);
}
-->
</script>
<form name="form1">
Please select a file.
<input type="file" name="uploadbox">
<br><br>
Click on the button to see the value of the FileUpload object.
<br>
<input type="button" value="Submit" onClick=showFile()>
</form>
</body>
</html>
Second Method of Referencing FileUpload Object Using the forms Elements Array
<html>
<head>
<title>Using form elements array to access FileUpload object</title>
</head>
<body>
<script language="JavaScript">
<!--
function showUploadName(){
alert("The FileUpload box name is: " + document.secret.elements[0].name);
}
-->
</script>
<form name="secret">
Please choose a file to be uploaded.
<br><br>
<input type="file" name="mybox" >
<br><br>
Click the button to get the name of the form containing the FileUpload box.
<br><br>
<input type="button" value="Get Form Name" onClick="showUploadName()">
</form>
</body>
</html>