File upload as field in html forms

Question

I have a form with multiple input fields.I want to add one file as a file upload.How do I accomplish this given the fact that html doesn't support nested forms tags.

<form class="form-horizontal" action="profile.php" method="post">
    <fieldset>

        <!-- Form Name -->
        <legend>Jobseeker profile</legend>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="txtaddress">Address</label>
            <div class="col-md-4">
                <input id="txtaddress" name="txtaddress" type="text" placeholder="" class="form-control input-md">

            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="txtmob">Mobile</label>
            <div class="col-md-4">
                <input id="txtmob" name="txtmob" type="text" placeholder="" class="form-control input-md">

            </div>
        </div>

        <!-- Date input --->
        <div class="form-group">
            <label class="col-md-4 control-label" for="date">DOB</label>
            <div class="col-md-4">
                <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text">
            </div>
        </div>

        <!-- Select Basic -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="txtqualification">Highest Qualification Achieved<span style="color:red">*</span></label>
            <div class="col-md-4">
                <select id="txtqualification" name="txtqualification" class="form-control">
                    <option value="SC">SC</option>
                    <option value="HSC">HSC</option>
                    <option value="BSc">BSc</option>
                    <option value="MS">MS</option>
                    <option value="Phd">Phd</option>
                </select>
            </div>
        </div>

        <!-- File Button -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="btnChooseUpload">Upload CV<span style="color:red">*</span></label>
            <div class="col-md-4">
                <input id="btnChooseUpload" name="btnChooseUpload" class="input-file" type="file">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="txtskills">Skills<span style="color:red">*</span></label>
            <div class="col-md-4">
                <input id="txtskills" name="txtskills" type="text" placeholder="" class="form-control input-md" required="">
            </div>
        </div>

        <!-- Button (Double) -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="btnSubmit"></label>
            <div class="col-md-8">
                <button id="btnSubmit" name="btnSubmit" class="btn btn-success">Submit</button>
                <button id="btnCancel" name="button2id" class="btn btn-danger">Cancel</button>
            </div>
        </div>

    </fieldset>
</form>

How do i add the enctype="multipart/form-data" just for the file upload ? Also i wanted to add a button so that user can upload files independantly of the form.

What exactly is your problem? Why would you need a nested form to include ``? — gyre, Dec 10 '16 at 09:59
If you post the code as well, we might be able to see the issue you have — Asons, Dec 10 '16 at 10:19
You can use `multipart/form-data` on the whole form whether there is a file input or not, the main difference is that text is not encoded. For a separate button to just upload a file, can an extra input be added or should the existing be used? — Asons, Dec 10 '16 at 11:26

score 1 · Answer 1 · answered Dec 10 '16 at 11:37

You can use multipart/form-data on the whole form whether there is a file input or not, the main difference is that characters is not encoded as they would when the default application/x-www-form-urlencoded is used. (but when one use file input, multipart/form-data is required)

For a separate button to just upload a file, and assuming you don't want to have two file input fields, simply add one more submit button and name that one different than the full form submit button.

Then, server side, you simply check which one the form was submitted with and you'll now if to deal with an upload only or the whole form.

Cee McSharpface · Answer 2 · 2016-12-10T13:11:14.717

0

Just add an <input type="file" /> tag inside your existing <form>...</form>, along with the other input tags.

For independent uploading, you can as well make a second form with its own submit button, or add a submit button with a different name, and check the server-side request to know which button triggered the submission.

edited Dec 10 '16 at 13:11

answered Dec 10 '16 at 10:02

Cee McSharpface

8,493
3
36
77

Doesn't the phrase _html doesn't support nested forms tags_ in the question make you wonder what the OP mean by that? ... I mean, the most obvious is to add an input file tag, but as the questioner post a phrase like that, tells me she/he is looking for something more than just that – Asons Dec 10 '16 at 10:22
sure. answer quality increases as question improves. and sometimes, elementary questions are later found to be duplicates of ancient stuff like this: http://stackoverflow.com/questions/1342506/why-is-form-enctype-multipart-form-data-required-when-uploading-a-file – Cee McSharpface Dec 10 '16 at 13:15

File upload as field in html forms

2 Answers2