JavaScript Tutorial/Form/FileUpload

Материал из Web эксперт
Перейти к: навигация, поиск

file Input Element

   <source lang="javascript">

<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></source>


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 



   <source lang="javascript">

<html> 

   <head>
   <title>Example using FileUpload object </title>
   </head>
   <body>
   <script language="JavaScript">
   
   </script>
   <form name="form1">
   Click on browse to choose a file to send.
   

   Click on the Send button to see the full path for the file sent.
   


   File to send: <input type="file" name="uploadBox">
   


   <input type="button" value="Send" name="get" onClick="showname()">
   


   <input type="text" name="filename" size="40">
   </form>
   </body>
   </html></source>

FileUpload.blur()

The blur() method is used to remove focus from the FileUpload box.



   <source lang="javascript">

<html> 

   <head>
   <title>Using the blur() method of the FileUpload object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </script>
   <form name="form1">
   Enter Filename:
   <input type="file" name="uploadbox">
   <input type="button" value="Okay" onClick=showMessage()>
   


   Confirmation:
   <input type="text" name="textbox">
   </form>
   </body>
   </html></source>

FileUpload.focus()

The focus() method is used to set focus to the FileUpload object.



   <source lang="javascript">

<html> 

   <head>
   <title>Using the focus method to set focus to FileUpload box</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </script>
   <form name="form1">
   Enter Filename:
   <input type="file" name="uploadbox">
   <input type="button" value="Okay" onClick="checkFile()">
   


   Confirmation Message:
   <input type="text" name="textbox" size=35>
   </form>
   </body>
   </html></source>

FileUpload.form

The form property is used to reference the form object that contains the FileUpload box.



   <source lang="javascript">

<html> 

   <head>
   <title>Using FileUpload form property</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </script>
   <form name="secret">
   Please choose two files to upload.
   


   File 1:<input type="file" name="file1">
   


   File 2:<input type="file" name="file2">
   


   <input type="button" value="Verify" onClick="checkFiles()">
   </form>
   </body>
   </html></source>

FileUpload.handleEvent()

Syntax



   <source lang="javascript">

fileupload.handleEvent(event)</source>


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.



   <source lang="javascript">

<html> 

   <head>
   <title> Using the name property of the FileUpload object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </script>
   <form name="form1">
   Click on the button below to get the name of the upload box.
   


   <input type="file" name="myUploadbox">
   


   <input type="button" value="Get Name" onClick="getname()">
   </form>
   </form>
   </html></source>

FileUpload.onBlur

Syntax



   <source lang="javascript">

onBlur="command"</source>


FileUpload.onChange

Syntax



   <source lang="javascript">

onChange="command"</source>


FileUpload.onFocus

Syntax



   <source lang="javascript">

onFocus="command"</source>


FileUpload.select()

The select() method selects the input area of the upload field.



   <source lang="javascript">

<html> 

   <head>
   <title>Using select() method of the FileUpload object</title>
   </head>
   <body>
   <script language = "JavaScript">
   
   </script>
   <form name="form1">
   <input type="file" name="uploadbox">
   


   <input type="button" value="Go to Filename Box" onClick="enterName()">
   </body>
   </form>
   </html></source>

FileUpload.type

The type property represents the TYPE attribute of the HTML <input> tag used to create the upload box.



   <source lang="javascript">

<html> 

   <head>
   <title>Using the type property of the FileUpload object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </script>
   <form name="form1">
   <input type="file" name="uploadbox">
   


   Click on the button below.
   

   <input type="button" value="Get Type" onClick="getType()">
   </form>
   </body>
   </html></source>

FileUpload.value

The value property specifies the filename of the file selected or input by the user.



   <source lang="javascript">

<html> 

   <head>
   <title>Using the value property of the FileUpload object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </script>
   <form name="form1">
   Please select a file.
   <input type="file" name="uploadbox">
   


   Click on the button to see the value of the FileUpload object.
   

   <input type="button" value="Submit" onClick=showFile()>
   </form>
   </body>
   </html></source>

Second Method of Referencing FileUpload Object Using the forms Elements Array

   <source lang="javascript">

<html> 

   <head>
   <title>Using form elements array to access FileUpload object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </script>
   <form name="secret">
   Please choose a file to be uploaded.
   


   <input type="file" name="mybox" >
   


   Click the button to get the name of the form containing the FileUpload box.
   


   <input type="button" value="Get Form Name" onClick="showUploadName()">
   </form>
   </body>
   </html></source>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/FileUpload&oldid=9101»