如何使用 Jquery/Ajax 上傳多個文件

Question

我正在嘗試使用 Jquery 和 Ajax 以及文本框上傳兩個不同的文件。

但是，我可以使用我擁有的代碼上傳單個文件和文本框，但是當我嘗試添加另一個輸入類型文件時，它會中斷並且不會上傳任何文件。

我擁有的單輸入類型文件的代碼：（上傳好）

測試.php

<form method="post" action="" enctype="multipart/form-data" id="myform">
    <div class='preview'><p class="temp"></p></div>
    <div >
        <input type="text" id="title" name="title" />
        <input type="file" id="image" name="image" />
        <input type="file" id="image" name="image2" />
        <input type="button" class="button" value="Upload" id="but_upload">
    </div>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#but_upload").click(function(){
            var fd = new FormData();
            var files = $('#image')[0].files;
            var title = $("#title").val();
            
                fd.append('image',files[0]);
                fd.append('title',title);

                $.ajax({
                    url:'test2.php',
                    type:'post',
                    data:fd,
                    contentType: false,
                    processData: false,
                    success:function(response){
                        if(response != 0){
                            $(".temp").html(response);
                            $('.preview').show();
                        }else{
                            alert('File not uploaded');
                        }
                    }
                });
        });
    });
</script>

測試2.php

<?php

   /* Getting file name */
   $filename = $_FILES['image']['name'];
   $title = $_POST['title'];

   /* Location */
   $location = "images-main/post-images/".$filename;
   $imageFileType = pathinfo($location,PATHINFO_EXTENSION);
   $imageFileType = strtolower($imageFileType);

   /* Valid extensions */
   $valid_extensions = array("jpg","jpeg","png");

   $response = 0;
   /* Check file extension */
   if(in_array(strtolower($imageFileType), $valid_extensions)) {
      /* Upload file */
      if(move_uploaded_file($_FILES['image']['tmp_name'],$location)){
          
         $response = $title;
         
      }
   }

   echo $response;
   exit;

我擁有的多輸入類型文件的代碼：（不上傳任何內容）

測試.php

<form method="post" action="" enctype="multipart/form-data" id="myform">
    <div class='preview'><p class="temp"></p></div>
    <div >
        <input type="text" id="title" name="title" />
        <input type="file" id="image" name="image" />
        <input type="file" id="image" name="image2" />
        <input type="button" class="button" value="Upload" id="but_upload">
    </div>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#but_upload").click(function(){
            var fd = new FormData();
            var files = $('#image')[0].files;
            var filess = $('#image')[1].filess;
            var title = $("#title").val();
            
                fd.append('image',files[0]);
                fd.append('image2',filess[0]);
                fd.append('title',title);

                $.ajax({
                    url:'test2.php',
                    type:'post',
                    data:fd,
                    contentType: false,
                    processData: false,
                    success:function(response){
                        if(response != 0){
                            $(".temp").html(response);
                            $('.preview').show();
                        }else{
                            alert('File not uploaded');
                        }
                    }
                });
        });
    });
</script>

測試2.php

<?php

   /* Getting file name */
   $filename = $_FILES['image']['name'];
   $filename2 = $_FILES['image2']['name'];
   $title = $_POST['title'];

   /* Location */
   $location = "images-main/post-images/".$filename;
   $location2 = "images-main/post-images/".$filename2;
   $imageFileType = pathinfo($location,PATHINFO_EXTENSION);
   $imageFileType = strtolower($imageFileType);

   /* Valid extensions */
   $valid_extensions = array("jpg","jpeg","png");

   $response = 0;
   /* Check file extension */
   if(in_array(strtolower($imageFileType), $valid_extensions)) {
      /* Upload file */
      if(move_uploaded_file($_FILES['image']['tmp_name'],$location)){
         if(move_uploaded_file($_FILES['image2']['tmp_name'],$location2)){
          
         $response = $title;
         
         }
      }
   }

   echo $response;
   exit;

任何幫助是極大的贊賞...

Answer 1

這工作正常。 感謝@CBroe：

這里有什么訣竅。

測試.php

<form method="post" action="" enctype="multipart/form-data" id="myform">
    <div class='preview'><p class="temp"></p></div>
    <div >
        <input type="text" id="title" name="title" />
        <input type="file" id="image" name="image" />
        <input type="file" id="video" name="video" />
        <input type="button" class="button" value="Upload" id="but_upload">
    </div>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#but_upload").click(function(){
            var fd = new FormData();
            var files = $('#image')[0].files;
            var filess = $('#video')[0].files;
            var title = $("#title").val();
            
                fd.append('image',files[0]);
                fd.append('video',filess[0]);
                fd.append('title',title);

                $.ajax({
                    url:'test2.php',
                    type:'post',
                    data:fd,
                    contentType: false,
                    processData: false,
                    success:function(response){
                        if(response != 0){
                            $(".temp").html(response);
                            $('.preview').show();
                        }else{
                            alert('File not uploaded');
                        }
                    }
                });
        });
    });
</script>

測試2.php

<?php

   /* Getting file name */
   $filename = $_FILES['image']['name'];
   $filename2 = $_FILES['video']['name'];
   $title = $_POST['title'];

   /* Location */
   $location = "images-main/post-images/".$filename;
   $imageFileType = pathinfo($location,PATHINFO_EXTENSION);
   $imageFileType = strtolower($imageFileType);
   
   $location2 = "images-main/post-images/".$filename2;
   $imageFileType2 = pathinfo($location2,PATHINFO_EXTENSION);
   $imageFileType2 = strtolower($imageFileType2);

   /* Valid extensions */
   $valid_extensions = array("jpg","jpeg","png");

   $response = 0;
      /* Upload file */
      if(move_uploaded_file($_FILES['video']['tmp_name'],$location2)){
            $response = $title;
        }
      
      if(move_uploaded_file($_FILES['image']['tmp_name'],$location)){
            $response = $title;
      }

   echo $response;
   exit;