javascript - Ajax文件上传仅获取filelist数组中的第一个文件进行上传

Question

我正在使用 jquery 和 Materialize 来执行异步文件上传和表单提交。该代码仅在我使用 get(0).files[0] 时才有效，但仅返回索引 [0] 处的第一个文件，但每当我尝试使用下面的代码循环上传数组中的所有文件时，它都会抛出一个 Uncaught Error 类型错误

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>