I'm having a problem in displaying the files that I've uploaded in my browser.
https://i.stack.imgur.com/6Gi7j.png
In the picture above,I manage to upload and view the files in the table for the documentation but I can't seems to do the same thing for the photos part(the one below the documentation).Here's my code in fiddle.Can anyone help me on this?Thanks in advance.
https://jsfiddle.net/cr5d8znw/
<form name="form_id" id="form_id" action="javascript:void(0);" enctype="multipart/form-data" style="width:800px; margin-top:20px;">
<div class="row">
<div class="col-lg-12">
<label class="fieldlabels">Documentation:</label> <br>
<input type="file" name="vasplus_multiple_files" id="vasplus_multiple_files" accept="application/pdf" multiple="multiple"/><br>
<!--input type="submit" value="Upload" /--><br>
<table class="table table-striped table-bordered" style="width:60%;" id="add_files">
<thead>
<tr>
<th style="color:blue; text-align:center;">File Name</th>
<th style="color:blue; text-align:center;">Status</th>
<th style="color:blue; text-align:center;">File Size</th>
<th style="color:blue; text-align:center;">Action</th>
<tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<label class="fieldlabels">Photo:</label> <br>
<input type="file" name="vasplus_multiple_files" id="vasplus_multiple_files" multiple="multiple" accept="image/*"/><br><br>
<table class="table table-striped table-bordered" style="width:60%;" id="add_files">
<thead>
<tr>
<th style="color:blue; text-align:center;">Photo Name</th>
<th style="color:blue; text-align:center;">Status</th>
<th style="color:blue; text-align:center;">File Size</th>
<th style="color:blue; text-align:center;">Action</th>
<tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<input type="submit" value="Upload" /><br>
</form>
The first input is working perfectly but for the second input the upload is working but can't display the files that been uploaded in the tables.