Post
Ask Question

Creating a File Upload Field in a Web Page

Introduction

 
While creating a website, in some situations you need to attach a field for attaching and uploading a document or a file to the webpage. Creating that field is not a tedious process. It is easily achieved using the form tag in HTML. The main usage of this tag is to deal with the file concept. In this blog, we will discuss creating a field with a file upload option in a website. Here I am giving only the HTML code. You may create the style sheet for this page based on your needs.
 

Steps

 
For creating the field, first you need to create a file with an html extension in the IDE. Then use the code given below to create the field.
  1. <!DOCTYPE html>    
  2. <html>    
  3. <body>    
  4.     
  5. <p>Click on the "Choose File" button to upload a file:</p>    
  6.     
  7. <form >    
  8.   <input type="file" id="myFile" name="filename">    
  9.   <input type="submit">    
  10. </form>    
  11.     
  12. </body>    
  13. </html>    
Here, I gave the simple and normal format of the code. You can edit it based on your requirements. Then save the file.
 

Output Verification

 
After saving the file, you will find an HTML file at the location where you saved the file. Open it using a browser. There you can see a button called Choose a File. By clicking it, you will be forwarded to your file explorer. After choosing the file, it is uploaded on the site and will be stored at your back end. Here, I do not attach any back end, so it does not get stored, but in the concept of creating a website, you are able to store the file using the same code.
 

Conclusion

 
This is an easy and more effective concept for the creation of a website. You are able to apply your concepts during the development of your site. You can load this to your server and it will be visible while browsing.