我有一个带有一些输入文本和一个输入多个文件的表格。问题在于，在加载一个或多个文件之后加载另一个文件时，先前加载的文件会被最后一次加载的文件覆盖。
这是表单的代码，是对php文件进行操作以处理表单数据的ajax调用的jquery代码。
$('form#formNewChallenge').submit(function(e){
$('#loaderDiv').removeClass('hidden-div');
e.preventDefault();
var form_data = new FormData(this);
$.ajax({
type: 'post',
url: './function/insert_challenge.php',
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function (answ) {
let json = $.parseJSON(answ);
var title_max = 60;
var text_max = 90;
if(json == "TUTTO OK"){
$('#loaderDiv').addClass('hidden-div');
$('#alertNewChallenge').removeClass('hidden-div').addClass('alert-success').text('Grazie per aver inserito la challenge').show(0).delay(5000).hide(0);
$("#formNewChallenge").trigger("reset");
$('#inputTag').tagsinput('removeAll');
$('#uploadDoc').next('.custom-file-label').html("Carica documentazione");
$('#uploadPhoto').next('.custom-file-label').html("Carica una foto");
$('#count_title').html('0' + ' / ' + title_max);
$('#count_short_description').html('0' + ' / ' + text_max);
// $("#formNewChallenge")[0].reset();
//$('#uploadPhoto').val("");
// $('#uploadDoc').val('');
// $('#inputTag').val('');
$("div.has-success").removeClass('has-success');
$("input.form-control-success").removeClass('form-control-success');
location.reload();
}
else{
$('#loaderDiv').addClass('hidden-div');
$('#alertNewChallenge').removeClass('hidden-div').addClass('alert-danger').text(json).show(0).delay(5000).hide(0);
}
}
})
});
$('#uploadDoc').on('change', function () {
var fileName = [];
fileName = $(this).val();
const numFiles = $(this)[0].files.length;
if(numFiles == 1)
$(this).next('.custom-file-label').html(fileName.substring(fileName.lastIndexOf('\\') + 1, fileName.length));
else
$(this).next('.custom-file-label').html(numFiles + ' files caricati');
})<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<form action="" id="formNewChallenge" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="col-sm-12" style="padding-top: 15px;">
<div class="form-group">
<input onchange="checkTitle(this);" type="text" id="inputName" name="nome" class="form-control" placeholder="Nome Challenge">
<span class="float-right " style="color: #999999; padding-bottom: 20px; margin-top: -30px; margin-right: 32px;" id="count_title"></span>
</div>
</div>
<div class="col-sm-12 well">
<div class="form-group">
<textarea onchange="checkTitle(this);" id="inputShortDescription" rows="6" name="shortDescription" class="form-control" placeholder="Breve descrizione"
style="resize: none;"></textarea>
<span class="float-right " style="color: #999999; padding-bottom: 20px; margin-top: -30px; margin-right: 12px;" id="count_short_description"></span>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<textarea onchange="checkTitle(this);" id="inputLongDescription" rows="9" class="form-control" placeholder="Descrizione" style="resize: none;" name="longDescription"
></textarea>
<span class="float-right " style="color: #999999; padding-bottom: 20px; margin-top: -30px; margin-right: 12px;" id="count_long_description"></span>
</div>
</div>
<div id="tipoMontepremi" class="col-sm-12">
<div class="form-group">
<!-- <input type="number" id="inputMontepremi" name="montepremi" class="form-control" placeholder="Montepremi" min="1"> -->
<select id="selectType" name="selectType" class="form-control" style="text-align-last:center;" onchange="changePrize();">
<option value="default" name="default" selected="">Montepremi</option>
<option value="stage" name="stage">Stage</option>
<option value="compenso" name="compenso">Compenso Monetario</option>
<option value="lavoro" name="lavoro">Offerta di Lavoro</option>
</select>
</div>
</div>
<div id="divInputMontepremi" class="col-sm-6 hidden-div">
<div class="form-group">
<input style="padding-left:20px; text-align:left;" type="number" id="inputMontepremi" name="montepremi" class="form-control" placeholder="Montepremi">
</div>
</div>
<!-- <div class="col-sm-6">
<div class="form-group">
<input type="text" placeholder="Prima Scadenza" class="form-control" id="primaScadenza" name="fine_primo_termine"
onfocus="(this.type='date')">
</div>
</div> -->
<div class="col-sm-12">
<div class="form-group">
<input style="text-indent: 10px;" type="text" placeholder="Termine" data-provide="datepicker" class="datepicker form-control" id="termine" name="data_scadenza">
</div>
<!-- <div class="input-group date" data-provide="datepicker">
<input placeholder="Termine" type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div> -->
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="custom-file">
<input type="file" name="foto" class="custom-file-input" id="uploadPhoto" accept=".png, .jpg, .jpeg">
<label class="custom-file-label" for="uploadPhoto">Carica una foto</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input" name="files[]" id="uploadDoc" multiple >
<label class="custom-file-label" for="uploadDoc">Carica documentazione</label>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input id="inputTag" name="microcategorie" type="text" class="form-control" value="" placeholder="Tags " data-placeholder="Tags " data-role="tagsinput">
</div>
</div>
<!-- ANONIMATO -->
<div class="col-sm-12" style="padding-top: 20px">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="anonymous" id="anonymous">
<label class="form-check-label" for="anonymous">Desidero pubblicare in anonimato</label>
</div>
</div>
<div class="col-sm-12" style="padding-top: 20px">
<div class="form-group">
<span style="font-weight: bold;">NOTA: </span>Ti consigliamo un'immagine alta 185px e larga 350px
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div id="alertNewChallenge" class="alert hidden-div"></div>
</div>
</div>
<!-- <div class="row text-center"> -->
<div id="loaderDiv" class="col-sm-12 text-center hidden-div">
</div>
<!-- </div> -->
<!-- <div class="col-sm-12">
<div id="divProgress" class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="background-color: #5cb85c; width:90%">90%</div>
</div>
</div> -->
<div class="col-md-12 text-center" style="padding-bottom: 40px;">
<button style="margin-top: 30px;" id="insertNewChallenge" class="btn btn-primary contact text-center" type="submit">PUBBLICA</button>
</div>
</div>
</div>
</form>