javascript — форма (внешний вызов div через ajax) для загружаемого файла говорит о неопределенном индексе файла

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

Форма отправлена, но при загрузке файла указан неопределенный индекс имени файла.!

вот мой код приборной панели

в моем меню боковой панели это код, где я вызываю другие div

 <ul class="sidebar-menu">
<li class="header">Company</li>
<li><a href="javascript:docupld()"><i class="fa fa-upload"></i> <span>Upload Documents</span></a></li>
<li><a href="javascript:docview()"><i class="fa fa-download"></i> <span>View Documents</span></a></li>
<li><a href="javascript:reports()"><i class="fa fa-bar-chart"></i> <span>Generate Reports</span></a></li>
<li><a href="javascript:compview()"><i class="fa fa-list"></i> <span>View Company</span></a></li>
<li class="treeview">
<a href="#"><i class="fa fa-user-plus"></i> <span>Register Company</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><a href="javascript:pcompreg()" ><i class="fa fa-male"></i> <span>Register Parent Company</span></a></li>
<li><a href="javascript:ccompreg()" ><i class="fa fa-child"></i> <span>Register Child Company</span></a></li>
</ul>
</li>
</ul><!-- /.sidebar-menu -->

Панель содержимого, где код объединяется (вызов ajax)

<section id="div1"  class="content">
<div id="loading-image" class="overlay">
<i class="fa fa-refresh fa-spin"></i>
</div>
</section>

Javascript для вызова AJAX

<script language="javascript" type="text/javascript">

$(window).load(function() {
$('#loading-image').hide();
});

function docupld(){
$("#loading-image").show();
$("#div1").load("docupld.php");

}

function docview(){
$("#loading-image").show();
$("#div1").load("docview.php");

}

function reports(){
$("#loading-image").show();
$("#div1").load("reports.php");

}

function pcompreg(){
$("#loading-image").show();
$("#div1").load("pcompreg.php");

}

function ccompreg(){
$("#loading-image").show();
$("#div1").load("ccompreg.php");

}
function compview(){
$("#loading-image").show();
$("#div1").load("compview.php");

} function load_home(){
$("#loading-image").show();
$("#div1").load("cmpreg1.php");

}

</script>

это див я звоню

                      <div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Upload Document</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body">

<div class="row">
<div class="col-md-12">
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-globe"></i>
</span>
</a>
</li>

<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-file"></i>
</span>
</a>
</li>

<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>

<form role="form" id="fupload" method="POST" enctype="multipart/form-data"">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">

<ul class="list-inline">
<div class="col-md-6">
<div class="form-group">
<label>Select Parent Pan Number</label>
<select class="form-control select2" name="panno" style="width: 100%;">
<option selected="selected" >AABPS8791R</option>
<option>CCBPS8551R</option>
<option>CCBSD8771R</option>
<option>CCBPS8591R</option>
<option>CHHPS8791R</option>
<option>CDFPS8651R</option>
<option>CCBPS8771R</option>
</select>
</div><!-- /.form-group -->
</div>
<div class="col-md-6">
<div class="form-group">
<label>Select Tan Number</label>
<select class="form-control select2" name="tanno" style="width: 100%;">
<option selected="selected">AABPS8791R</option>
<option>CCBPS8551R</option>
<option>CCBSD8771R</option>
<option>CCBPS8591R</option>
<option>CHHPS8791R</option>
<option>CDFPS8651R</option>
<option>CCBPS8771R</option>
</select>
</div><!-- /.form-group -->
</div>

<div class="col-md-6">
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</div>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">

<ul class="list-inline">
<div class="col-md-3">
<div class="form-group">
<label>Select Financial year</label>
<select class="form-control select2" name="year" style="width: 100%;">
<option selected="selected">2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
</select>
</div><!-- /.form-group -->
</div>
<div class="col-md-3">
<div class="form-group">
<label>Select Quarter</label>
<select class="form-control select2" name="quarter" style="width: 100%;">
<option selected="selected">Q1(Apr, May, Jun) </option>
<option>Q2 (July, Aug, Sept) </option>
<option>Q3 (Oct, Nov, Dec) </option>
<option>Q4 (Jan, Feb, Mar) </option>

</select>
</div><!-- /.form-group -->
</div><div class="col-md-6">
<div class="form-group">
<label>Select Form Type</label>
<select class="form-control select2" name="formtype" style="width: 100%;">
<option selected="selected">Form 24Q</option>
<option>Form 26Q</option>
<option>Form 27Q</option>

</select>
</div><!-- /.form-group -->
</div><li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li></ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">

<ul class="list-inline">

<div class="col-md-3">
<div class="form-group">
<label>Select File Type</label>
<select class="form-control select2" name="ftype" style="width: 100%;">
<option selected="selected">Acknowledgement receipt(s) from bank</option>
<option>Acknowledgement receipt(s) from Income tax department</option>
<option>FORM16 A</option>
<option>Software Generated Files </option>

</select>
</div><!-- /.form-group -->
</div>

<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li></ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">

<ul class="list-inline">
<div class="col-md-6">
<div class="form-group">
<label>Select File</label>
<input type="file" name="ufile"></input>
</div><!-- /.form-group -->
</div>
<div class="col-md-6">
<div class="form-group">
<label>Enter Details</label>
<input type="text" name="fnote" ></input>
</div><!-- /.form-group -->
</div>

<div class="col-md-6">
<button type="submit" name= "submit" class="btn btn-primary">Submit</button>
</div>
</ul>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>

</div>
</div>
</div><script>

$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();

//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

var $target = $(e.target);

if ($target.parent().hasClass('disabled')) {
return false;
}
});

$(".next-step").click(function (e) {

var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);

});
$(".prev-step").click(function (e) {

var $active = $('.wizard .nav-tabs li.active');
prevTab($active);

});
});

function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
</script>

<script src="plugins/select2/select2.full.min.js"></script>
<script>
$(".select2").select2();
$("#fupload").submit(function(e) {

var url = "processdocupld.php"; // the script where you handle the form input.

$.ajax({
type: "POST",
url: url,
data: $("#fupload").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data);

}
});

e.preventDefault(); // avoid to execute the actual submit of the form.
});

</script>