文件上传时间（document.getElementById（“file”）。files [0] .name）获取错误

In javascript (document.getElementById("file").files[0].name) is giving not able to the file name for the loacl sever

Error:Uncaught TypeError: Cannot read property 'name' of undefined

HTML

<?php $j=10; for($i=0; $i<=$j;$i++){?><div>

    <a href="#" title="Give some input related to this track" data-toggle="modal" data-target=".bs-example-modal-lgdata<?php echo $i;?>"><i class="fa fa-pencil-square-o"></i></a>
<div class="modal fade bs-example-modal-lgdata<?php echo $i;?>" tabindex="-1" role="dialog" aria-hidden="true">
<form  data-parsley-validate class="form-horizontal form-label-left" action="../text.php" method="post">

    <input type="file" name="file" id="file" multiple="multiple" required >

     </p> 
     <span id="uploaded_image"></span>

      <div>

       </div>
 </div>
</div>
<?php }?>

javascript

 <script>

                $(document).ready(function(){

                 $(document).on('change', '#file', function(){
                  $('div.loader').show();

                  var name = document.getElementById("file").files[0].name;
               });

               });

             </script>