Ajax文件上传只获取filelist数组中的第一个文件上传

Question

我正在使用jquery和materialize做一个异步文件上传和表单提交。只有当我使用get（0）.files [0]，但只返回索引[0]处的第一个文件，但每当我尝试循环使用下面的代码上传数组中的所有文件时，该代码就会工作，它会引发未捕获类型错误

script.js:7 Uncaught TypeError: Cannot read property 'type' of undefined

这是我的ajax上传代码==>（的script.js）

  $(function(){ 
       $('#file').change(function(){ 
        for (i=0; i = $('#file').get(0).files.length; i++){ 
         console.log(this,'this'); 
         console.log($('#file').get(0).files[i]); 
         var file=this.files[i];  
         var imagetype=file.type; 
         var imgtags =['image/jpeg','image/pjpeg',"image/png","image/jpg","image/gif"];  
         if(imgtags.indexOf(imagetype)>0){ 
          Materialize.toast('File Is an image!', 2000);   
          var filereader=new FileReader(); 
          filereader.onload=FileLoadCheck; 
          filereader.readAsDataURL(this.files[i]); 
          FileUploadAjaxCall(); 
         }else{ 
          Materialize.toast('File Is not an image!', 2000); 
          $('#previewImage').attr('src','images/images.png'); 
          var filereader=new FileReader(); 
          filereader.onload=FileLoadCheck; 
          filereader.readAsDataURL(this.files[i]); 
          FileUploadAjaxCall(); 
          return false; 
         } 
        } 
       }); 
       function FileLoadCheck(e){ 
        console.log(e,'Object'); 
        $('#previewImage').attr('src',e.target.result); 
       } 

      }); 
      function FileUploadAjaxCall(){ 
       $.ajax({ 
        url:'fileupload.php?_'+new Date().getTime(), 
         type:'POST', 
         data:new FormData($('#UploadMedia').get(0)), 
         contentType:false, 
         cache:false, 
         processData:false, 
         success:function(data){ 
          console.log(data,'data'); 
          Materialize.toast('File Upload Successfully!', 2000); 
         } 
        }); 
      } 

，这是我的PHP文件处理文件移动到服务器上的目录。

   <?php 
       echo "<pre>"; 
       print_r($_FILES); 
       // die; 

       $sourcePath = $_FILES['file']['tmp_name']; 
       $targetPath = "uploads/" . round(microtime(true)) . '.' . end($_FILES['file']['name']); 
       echo $targetPath; 
       move_uploaded_file($sourcePath, $targetPath); 
       echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>"; 
       echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>"; 
       echo "<b>Size:</b> " . ($_FILES["file"]["size"]/1024) . " kB<br>"; 
       echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>"; 
       ?> 

编辑，包括HTML表单处理上传：

<form method="post" enctype="multipart/form-data" id="UploadMedia"> 
    <div class="container-fluid"> 
     <div class="row">    
      <div class="col s6 push-s3"> 
       <div class="card card-panel hoverable"> 
        <div class="card-image"> 
         <img src="images/images.png" class="img-responsive" id="previewImage"> 
         <span class="card-title">Image Show Here</span> 
        </div> 
        <div class="card-content"> 
         <div class="file-field input-field"> 
          <div class="btn" style="background-color:#757575"> 
           <span>File</span> 
           <input type="file" name="file" id="file" multiple> 
          </div> 
          <div class="file-path-wrapper"> 
           <input class="file-path validate" type="text" placeholder="Upload one or more files"> 
          </div> 
         </div>       
        </div>              
       </div> 
      </div>        
     </div>    
    </div> 
</form> 

Answer 1

我相信它应该是for (i = 0; i < this.files.length; i++){重视<。

编辑

$('#file').change(function() { 
 
     console.clear(); 
 
     for (i = 0; i < this.files.length; i++) { 
 
     var file = this.files[i]; 
 
     var imagetype = file.type; 
 
     var imgtags = ['image/jpeg', 'image/pjpeg', "image/png", "image/jpg", "image/gif"]; 
 
     console.log(imagetype); 
 
     if (imgtags.indexOf(imagetype) !== -1) { 
 
      console.log('File Is an image!'); 
 
     } else { 
 
      console.log('File Is not an image!'); 
 
     } 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" name="file" id="file" multiple>