Загрузка файла как поля в html-формах

Question

У меня есть форма с несколькими полями ввода. Я хочу добавить один файл в файл для загрузки. Как это сделать, учитывая тот факт, что html не поддерживает теги вложенных форм.

<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> 

Как добавить enctype="multipart/form-data" только для загрузки файла? Также я хотел добавить кнопку, чтобы пользователь мог загружать файлы независимо от формы.

Answer 1

Просто добавьте тег <input type="file" /> в существующие существующие <form>...</form>, а также другие теги input.

Для независимой загрузки вы можете также сделать вторую форму с помощью собственной кнопки отправки или добавить кнопку отправки с другим именем и проверить запрос на стороне сервера, чтобы узнать, какая кнопка вызвала отправку.

Answer 2

multipart/form-data Вы можете использовать multipart/form-data на всей форме, есть ли файл ввода или нет, основное отличие состоит в том, что символы не кодируются, как если бы они использовались по умолчанию application/x-www-form-urlencoded. (но при использовании одного файла с файлом требуется multipart/form-data)

Для отдельной кнопки, чтобы просто загрузить файл, и если вы не хотите иметь два поля ввода файла, просто добавьте еще одну кнопку отправки и назовите ее отличной от кнопки отправки полной формы.

Затем, на стороне сервера, вы просто проверяете, с какой формой была отправлена ​​форма, и теперь вы будете иметь дело с загрузкой или всей формой.