HTML file tags – File upload HTML file tags – File upload

After learning how to get text and selection inputs from the user let’s now teach you about a very interesting tag in HTML which is used for selecting files from your computer. You might have upload an image to Facebook for sure. When you upload an image the first step you do is to select the image from your computer. For this you are shown a file selection box with the help of which you can browse all files and folders in your computer and select the one which you want to choose. Many HTML beginners think that for this whole file selection exercise coding is needed. But this is not correct, HTML provides you with this functionality by default. All you have to do is put an input tag with type attribute set to file where you want the user to select a file. Look at the mark-up below

<html>      
    <head>      
    </head>      
    
    <body>          
        <form action="http://abc.com/index.html" method="GET">              
            Choose an image              
            <br>              
            <input type="file" />          
        </form>      
    </body>  
</html>

Here we are asking the user to select a file from his computer. For this we have used an input tag with its type attribute set to file. This is how the browser will display the output for this HTML markup

Image 

See how the browser shows you a browse button and on clicking this button you will see that the full file selection box will show up. Different browsers will display the file selection button in different way, but the process of selecting the file is the same in all browsers.

The file selection control only helps you select a file from your computer. To send the selected file to the server when the form gets submitted you have to inform the form tag that it should take the selected file along with it when the user submits the form. For this you have to take the following steps

  1. Set the method attribute of the <form> tag to POST. File upload operations never work with GET method
  2. Set the enctype attribute for the <form> tag to multipart/form-data. This tells the form that some files have to besubmitted to the server and it should make sure that these files are properly sent to the server.

Look at the markup below

<html>      
    <head>      
    </head>      
    
    <body>          
        <form action="http://abc.com/index.html" method="POST" enctype="multipart/form-data">              
            Choose an image              
            <br>              
            <input type="file" />              
            <br>              
            <input type="submit" value="Upload" />          
        </form>      
    </body>  
</html>

Here you should notice two things

  1. We have set the enctype attribute for the form tag to multipart/form-data and the method attribute of the <form> tag is set to POST
  2. We have added a submit button on clicking which the form will get submitted.

Now the form will be aware that it has to take the file data to the server along with other data entered by the user. Once the form submits the data along with the selected file to the server its job is over, what should be done with the uploaded file is the job of the server side code. The form only sends the file from the browser to the server. It does not save it on the server. This should be done using the server side code.

आप बहुत ही अच्छे से input tag को इस्तेमाल करना सीख चुके है की किस तरह से user से उसकी जानकारी text के तरीके से, उनकी choice को select करने के तरीके से ले सकते हैं तो आये अब हम आगे चलते हैं अपने एक और बहुत ही दिलचस्प html tag को सीखने के लिए जिस की मदद से आप अपने computer से कोई भी file को select कर सकते हैं | आप सभी ने कभी न कभी तो facebook पर किसी न किसी image को ज़रूर upload किया ही होगा | facebook पर image को  upload करने के लिए सबसे पहले आपको अपने computer में से उस image को select करना होता है जिस्को आप upload करना चाहते हैं | file को select करने के लिए आपके सामने file selection box आता है जिसमे से अपने computer में पड़ी सारी images में से आप को उस image को select करना होता है जिसको आप upload करना चाहते हैं | जो लोग html को अभी सीखना शुरू ही हुए होते हैं वो शायद ये समझते हैं की file को select coding के इस्तेमाल से किया जाता है लेकिन ऐसा नहीं होता  | file को select करने के लिए आपको किसी coding की ज़रुरत नहीं होती आपको बस input tag का इस्तेमाल करना होता है | user को जहाँ भी फाइल select करनी है उसको वहां type attribute में लिखना है file जिस तरह से submit करते हुए हम type attribute में submit लिखते थे | आप निचे दिए गये mark-up को देखिये :-

<html>      <head>      </head>      <body>          <form action="http://abc.com/index.html" method="GET">              Choose an image              <br>              <input type="file" />          </form>      </body>  </html>



यहाँ पर user ने अपने computer में से file को select करना है इसलिए हमने यहाँ input tag को इस्तेमाल किया है और type attribute में फाइल लिखा गया है जिस से की browser को समझ आ सके की उसको क्या करना है और आप निचे देखिये की ये browser में कैसे दिखाई देगा :-

Image 

आप देख सकते हैं की browser में आपको browse का button नज़र आ रहा है अगर आप us पर click करेंगे तो आपके सामने file selection box आएगा और आप जिस भी फाइल को select करना चाहते हो वहां से कर सकते हैं | अलग अलग browsers में browse का बटन अलग तरह से नज़र आता है लेकिन file को select करने का तरीका हर browser में एक जैसा ही होता है |

अपने computer से किसी भी file को select करने के लिए आप file selection control का इस्तेमाल करते हैं | जब भी आप किसी form को भरते हैं और उसके साथ किसी file को select करके attach करते है तो आपको form tag को बताना होता है की form को server में submit करते समय उसके साथ साथ attach की गयी file को भी submit करें | आइये निचे दिए गये steps से समझते हैं की इसको कैसे करना है :-

  1. आपको <form> tag में method attribute को POST करना है क्यूंकि GET method के साथ कभी भी file को upload नहीं किया जाता |
  2. आपको <form> tag में enctype attribute में लिखना है multipart/form-data, इसका मतलब browser को ये समझाना है की form के साथ कुछfiles भी हैं जिनको server को submit करना है और ये भी ज़रूर ध्यान देना है के server को ये ठीक से मिल भी जाए |

आप इसको समझने के लिए निचे दिए गये mark-up को देखिये

<html>      <head>      </head>      <body>          <form action="http://abc.com/index.html" method="POST" enctype="multipart/form-data">              Choose an image              <br>              <input type="file" />              <br>              <input type="submit" value="Upload" />          </form>      </body>  </html>



आपको 2 बातों पर ध्यान देना है :-

  1. ऊपर दिए गये form tag में enctype attribute को multipart/form-data लिखा गया है और method attribute को भी post लिखा है
  2. ऊपर दिए गये form tag में submit button भी दिया गया है जिसको click करने से form submit हो जायेगा |

जब भी आप ऊपर बताई गयी बातों को लिखेंगे तो form tag को ये समझ आ जायेगा की user से मिले data के साथ साथ डाली गयी file को भी server तक पहुँचाना है | एक बार form ने server को data और file दोनों को submit कर दिया तब उसका काम वहीँ ख़तम हो जायेगा और server side code का काम शुरू हो जायेगा | form का काम सिर्फ file को browser से server तक देना है बाकी का काम server का ही है |

Need Learning Guidence?
Join our Study Groups and get step by step guidence.
Learn HTML and CSS
The goal of creating this study group is to help students who are beginners to HTML and CSS program
7
Members
1
Questions Asked
0
Tasks Added
Learn Website Development
This goal of this study group is to help students learn the basics of website development using HTM
1
Members
0
Questions Asked
0
Tasks Added
Website Development Interview Preparation
This goal of this study group is to help students prepare for their website development interviews.
1
Members
0
Questions Asked
0
Tasks Added
Web Wars 1.0 - Build Your Digital CV
The goal of this study group is to manage all the communication for the 'Web Wars 1.0 - Build Your
110
Members
0
Questions Asked
0
Tasks Added

Quick Links

E-Magazines

@

Total Followers
Study Group Created
Study Group Joined
Following Teacher
Following Organization
Blog Articles Added
Questions Asked
Questions Answered
Jobs Posted
Total Members in Group
Questions asked by members
Tasks added in this Group

Please wait..

Ok

Login to Open ESchool OR Create your account    Login   SignUp