CODEWITHSUNDEEP
html
user2650277
user2650277

Reputation: 6729

File upload as field in html forms

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.

Upvotes: 0

Views: 204

Answers (2)

Cee McSharpface
Cee McSharpface

Reputation: 8726

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.

Upvotes: 0

Asons
Asons

Reputation: 87191

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.

Upvotes: 1

Related Questions