http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FForm%2FFileUpload
JavaScript Tutorial/Form/FileUpload - История изменений
2026-04-04T06:10:34Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/FileUpload&diff=9101&oldid=prev
Admin: 1 версия
2010-05-26T08:24:47Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:24, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/FileUpload&diff=9100&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== file Input Element==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<head> <br />
<title>FileUpload Object</title> <br />
</head> <br />
<body> <br />
<br />
<form method="POST" action="" enctype=""> <br />
File to be uploaded: <br />
<input type="file" size="40" name="fileToGo" /> <br />
<input type="button" value="View Value" onclick="alert(this.form.fileToGo.value)" /></p> <br />
</form> <br />
</body> <br />
</html></source><br />
<br />
<br />
<br />
== FileUpload==<br />
<br />
<p>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.</p><br />
<p>The FileUpload object has specific properties and methods associated with it, which are shown in the following Table.</p><br />
Property/Method<br />
Description<br />
blur()<br />
Removes focus from FileUpload box<br />
focus()<br />
Sets focus on FileUpload box<br />
form<br />
Reference form object containing FileUpload box<br />
handleEvent()<br />
Handles specific event<br />
name<br />
HTML NAME attribute for FileUpload box<br />
onBlur<br />
Event handler for Blur event<br />
onChange<br />
Event handler for Change event<br />
onFocus<br />
Event handler for Focus event<br />
select()<br />
Selects input area for FileUpload box<br />
type<br />
HTML TYPE attribute for FileUpload box<br />
value<br />
String specifying pathname of selected file<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Example using FileUpload object </title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function showname(){<br />
var file = document.form1.uploadBox.value ;<br />
document.form1.filename.value = file ;<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
Click on browse to choose a file to send.<br />
<br><br />
Click on the Send button to see the full path for the file sent.<br />
<br><br><br />
File to send: <input type="file" name="uploadBox"><br />
<br><br><br />
<input type="button" value="Send" name="get" onClick="showname()"><br />
<br><br><br />
<input type="text" name="filename" size="40"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== FileUpload.blur()==<br />
<br />
<p>The blur() method is used to remove focus from the FileUpload box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Using the blur() method of the FileUpload object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function showMessage(){<br />
document.form1.uploadbox.blur();<br />
document.form1.textbox.value = "File Submitted";<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
Enter Filename:<br />
<input type="file" name="uploadbox"><br />
<input type="button" value="Okay" onClick=showMessage()><br />
<br><br><br />
Confirmation:<br />
<input type="text" name="textbox"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== FileUpload.focus()==<br />
<br />
<p>The focus() method is used to set focus to the FileUpload object.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Using the focus method to set focus to FileUpload box</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function checkFile(){<br />
document.form1.uploadbox.focus();<br />
document.form1.textbox.value = "Verify that filename is correct";<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
Enter Filename:<br />
<input type="file" name="uploadbox"><br />
<input type="button" value="Okay" onClick="checkFile()"><br />
<br><br><br />
Confirmation Message:<br />
<input type="text" name="textbox" size=35><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== FileUpload.form==<br />
<br />
<p>The form property is used to reference the form object that contains the FileUpload box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Using FileUpload form property</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function checkFiles(){<br />
if (document.secret.file1.value == ""){<br />
alert("You did not enter anything for file 1");<br />
}<br />
if (document.secret.file2.value == ""){<br />
alert("You did not enter anything for file 2");<br />
}<br />
else {<br />
alert("The files are okay and will be uploaded");<br />
}<br />
}<br />
--><br />
</script><br />
<form name="secret"><br />
Please choose two files to upload.<br />
<br><br><br />
File 1:<input type="file" name="file1"><br />
<br><br><br />
File 2:<input type="file" name="file2"><br />
<br><br><br />
<input type="button" value="Verify" onClick="checkFiles()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== FileUpload.handleEvent()==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
fileupload.handleEvent(event)</source><br />
<br />
<br />
<br />
== FileUpload.name==<br />
<br />
<p>The name property represents the NAME attribute of the HTML <input> tag that creates the FileUpload box.</p><br />
<p>This allows you to reference a FileUpload object directly by name.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Using the name property of the FileUpload object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function getname(){<br />
var boxname = document.form1.myUploadbox.name;<br />
alert("The name of the FileUpload box is: " + boxname);<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
Click on the button below to get the name of the upload box.<br />
<br><br><br />
<input type="file" name="myUploadbox"><br />
<br><br><br />
<input type="button" value="Get Name" onClick="getname()"><br />
</form><br />
</form><br />
</html></source><br />
<br />
<br />
<br />
== FileUpload.onBlur==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
onBlur="command"</source><br />
<br />
<br />
<br />
== FileUpload.onChange==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
onChange="command"</source><br />
<br />
<br />
<br />
== FileUpload.onFocus==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
onFocus="command"</source><br />
<br />
<br />
<br />
== FileUpload.select()==<br />
<br />
<p>The select() method selects the input area of the upload field.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Using select() method of the FileUpload object</title><br />
</head><br />
<body><br />
<script language = "JavaScript"><br />
<!--<br />
function enterName(){<br />
document.form1.uploadbox.select();<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
<input type="file" name="uploadbox"><br />
<br><br><br />
<input type="button" value="Go to Filename Box" onClick="enterName()"><br />
</body><br />
</form><br />
</html></source><br />
<br />
<br />
<br />
== FileUpload.type==<br />
<br />
<p>The type property represents the TYPE attribute of the HTML <input> tag used to create the upload box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Using the type property of the FileUpload object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function getType(){<br />
var mytype = document.form1.uploadbox.type;<br />
alert("The input box type is: " + mytype);<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
<input type="file" name="uploadbox"><br />
<br><br><br />
Click on the button below.<br />
<br><br />
<input type="button" value="Get Type" onClick="getType()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== FileUpload.value==<br />
<br />
<p>The value property specifies the filename of the file selected or input by the user.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Using the value property of the FileUpload object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function showFile(){<br />
var input = document.form1.uploadbox.value;<br />
alert("The filename entered is: " + input);<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
Please select a file.<br />
<input type="file" name="uploadbox"><br />
<br><br><br />
Click on the button to see the value of the FileUpload object.<br />
<br><br />
<input type="button" value="Submit" onClick=showFile()><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Second Method of Referencing FileUpload Object Using the forms Elements Array==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Using form elements array to access FileUpload object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function showUploadName(){<br />
alert("The FileUpload box name is: " + document.secret.elements[0].name);<br />
}<br />
--><br />
</script><br />
<form name="secret"><br />
Please choose a file to be uploaded.<br />
<br><br><br />
<input type="file" name="mybox" ><br />
<br><br><br />
Click the button to get the name of the form containing the FileUpload box.<br />
<br><br><br />
<input type="button" value="Get Form Name" onClick="showUploadName()"><br />
</form><br />
</body><br />
</html></source></div>