I have multiple input fields and I want each input field to upload image to a separate column in database using ajax. In Below code, I have 8 input "type: file" fields. Also in database, I have 8 columns. So I want each input field to upload image to a separate single column.
<form method="POST" enctype="multipart/form-data" id="proj_form">
<div class="form-group">
<label for="proj_header_img">Project Header Image*</label>
<input type="file" class="form-control" name="proj_header_img" id="proj_header_img">
</div>
<div class="form-group">
<label for="proj_card_image">Project Card Image*</label>
<input type="file" class="form-control" name="proj_card_image" id="proj_card_image">
</div>
<div class="form-group">
<label for="proj_mini_img1">Project Mini Image #1</label>
<input type="file" class="form-control" name="proj_mini_img1" id="proj_mini_img1">
</div>
<div class="form-group">
<label for="proj_mini_img2">Project Mini Image #2</label>
<input type="file" class="form-control" name="proj_mini_img2" id="proj_mini_img2">
</div>
<div class="form-group">
<label for="proj_img1">Project Image #1</label>
<input type="file" class="form-control" name="proj_img1" id="proj_img1">
</div>
<div class="form-group">
<label for="proj_img2">Project Image #2</label>
<input type="file" class="form-control" name="proj_img2" id="proj_img2">
</div>
<div class="form-group">
<label for="proj_img3">Project Image #3</label>
<input type="file" class="form-control" name="proj_img3" id="proj_img3">
</div>
<div class="form-group">
<label for="proj_img4">Project Image #4</label>
<input type="file" class="form-control" name="proj_img4" id="proj_img4">
</div>
<button type="submit" class="btn btn-default">Insert Project</button>
</form>