HTML file upload example

Here is an example of File Upload in html. In this program we have displayed three "text field" and one "Browse file" option. We have also used Reset button and Save button. We have used Reset button that resets all fields to blank and we have used Save button that adds the data and display it on the screen.

HTML file upload example

HTML file upload example

Here is an example of File Upload in html. In this program we have displayed three "text field" and one "Browse file" option. We have also used Reset button and Save button. We have used Reset button that resets all fields to blank and we have used Save button that adds the data and display it on the screen. When we save the data and the file browsed, an alert is displayed by the "alert" method. The value property that contains a value typed by user sets or returns the value attribute of a text field and a value set by a script

In this example we have shown three "Text Field", Reset button and last one is Save button.

Example

Fileupload.html

<html>
<head>
<script>
function displayResult()
{
var x=document.getElementById("textname").value;
var y=document.getElementById("textaddress").value;
var z=document.getElementById("textfiles").value;
var a=document.getElementById("upfile").value;
alert(x);
alert(y);
alert(z);
alert(a);
}
</script>
</head>
<body>
<form>
<table width="30%" bgcolor="#00FFFF" align="center">

<tr>
<td colspan=4><center><font size=4><b>File Upload in HTML</b></font></center></td>
</tr>

<tr>
<td>Name:</td>
<td><input type=text name=textnames id="textname"></td>
</tr>
<tr>
<td>Address:</td>
<td><input type=text name=textaddress id="textaddress"></td>
</tr>
<tr>
<td>About the file:</td>
<td><input type=text name=textfiles id="textfiles"></td>
</tr>
<tr>
<td>File to upload:</td>
<td><input type=file name=upfile id="upfile"><br>
</td>
</tr>
<tr>
<td><input type="reset"></td>
<td><input type=button onclick="displayResult()" value="Save"/></td>
</tr>
</table>
</form>
</body>
</html>

OutPut:-

Download Source Code