使用多个输入上载多个文件

Question

我的HTML代码是（AJAX方法）：

    <?php
    $i = 1;
    while($i < 10){
        ?>
        <div id="photoManagement<?php echo $i; ?>">
        <div class="form-group">
            <label for="contenu" class="col-lg-2 control-label">Choix de la photo <?php echo $i; ?></label>
            <div class="col-lg-7">
                <input id="photo<?php echo $i; ?>" type="file" name="image<?php echo $i; ?>" accept="image/*">
            </div>
        </div><br /><br />

        <div class="form-group" style="margin-bottom: 0;">
            <div id="image_preview<?php echo $i; ?>" class="col-lg-12">
                <div class="thumbnail hidden">
                    <img src="http://placehold.it/5" alt="">
                    <div class="caption">
                        <h4></h4>
                        <p></p>
                        <p><button id="cancelImg<?php echo $i; ?>" type="button" class="btn btn-flat btn-danger">Annuler</button>
                        <button id="sendImg<?php echo $i; ?>" location.hred = "#portfolioImg1" class="pull-right btn btn-dark btn-theme-colored btn-flat mr-5">Ajouter</button></p>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <?php
        $i++;
        }
    ?> 

标签远远落后。这就是它没有出现的原因。

我的PHP（AJAX方法）：

<?php

header("Access-Control-Allow-Origin: *");

if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ) ) //sécurité pour ne pas avoir d'accès direct sur le fichier
{
    include('../MODEL/sqlConnexion.php');
    //Partie traitement des photos
    foreach($_FILES as $photo)
    {
        $key = key($_FILES);
        if (isset($photo))
        {
            if ($photo['error'] == 0)
            {
                // Test pour voir si l'extension du fichier est bien autorisée
                $file_path = pathinfo($photo['name']);
                $file_extension = $file_path['extension'];
                $allowed_extensions = array('jpg', 'jpeg', 'gif', 'png');
                if (in_array($file_extension, $allowed_extensions))
                {
                    // Test pour voir si le fichier n'est pas trop gros
                    if ($photo['size'] <= 1048576)
                    {
                        $response['check'] = 'OK';
                        $path = '../images/chevaux/' . $_POST['horseName'] . '/' . $key . '.' . $file_extension;
                        $folder = '../images/chevaux/' . $_POST['horseName'];
                        if (!is_dir($folder))
                            {
                                mkdir($folder);
                            }
                        move_uploaded_file($photo['tmp_name'], $path);
                    }
                    else
                    {           
                        $response[$nomImage] = "Le fichier " . $key . " est trop volumineux.";
                    }
                }
                else
                {
                    $response[$nomImage] = "L'extension du fichier " . $key . " n'est pas prise en charge, les extensions prises en charge sont jpg, jpeg, gif, et png.";
                }

            }
            elseif ($photo['error'] != 4)
            {
                $response[$nomImage] = "Le fichier " . $key . "est en erreur.";
            }
        }
    }
    if ((count($response) == 1) && ($response['check'] == 'OK'))
    {
        $response['check'] = 'OK';
    }
    else
    {
        $response['check'] = 'NOTOK';
    }
    echo json_encode($response);
}

该文件夹是在服务器上创建的，但只上传了第一个输入的第一个文件。这就是为什么我没有把所有正常工作的javascript代码放到原处。代码上唯一的问题是＆＃34; move_uploaded_file＆＃34;。

你有什么想法吗？

Answer 1

我找到了解决方案。实际上，变量$ key始终是相同的。因此，图片总是被循环擦除。

我不得不写：

<ng2-map [zoom]="mapOptions.zoom" [minZoom]="mapOptions.minZoom" [center]="mapOptions.center" (click)="mapClick($event)">
                    <drawing-manager *ngIf = "selectedJurisdictions.length > 0" 
                        [drawingMode]="'null'"
                        [drawingControl]="true"
                        [drawingControlOptions]="{
                          position: 2,
                          drawingModes: ['circle', 'polygon']
                         }"
                        [circleOptions]="{
                          fillColor: 'red',
                          fillOpacity: 0.3,
                          strokeColor: 'black',
                          strokeWeight: 2,
                          editable: true,
                          draggable: true,
                          zIndex: 1
                        }"
                        [polygonOptions]="{
                          fillColor: 'red',
                          fillOpacity: 0.3,
                          strokeColor: 'black',
                          strokeWeight: 2,
                          editable: true,
                          draggable: true,
                          zIndex: 1
                        }"
                        (polygoncomplete)="polygonCompleteFunction($event)"
                        (circlecomplete)="circleCompleteFunction($event)">
                    </drawing-manager>
                    <!--Begin Jurisdiction shapes-->
                    <map-polygon  *ngFor="let polygonData of jurisdictionPolygons" [editable]="false"
                        [paths]="polygonData"
                        [strokeColor]="mapJurisdictionOptions.strokeColor"
                        [strokeOpacity]="mapJurisdictionOptions.strokeOpacity"
                        [strokeWeight]="mapJurisdictionOptions.strokeWeight"
                        [fillColor]="mapJurisdictionOptions.fillColor"
                        [fillOpacity]="mapJurisdictionOptions.fillOpacity" zindex="2">
                    </map-polygon>
                    <map-circle  *ngFor="let circleData of jurisdictionCircles" 
                        [center]="circleData.geocode"
                        [strokeColor]="mapJurisdictionOptions.strokeColor"
                        [strokeOpacity]="mapJurisdictionOptions.strokeOpacity"
                        [strokeWeight]="mapJurisdictionOptions.strokeWeight"
                        [radius] ="circleData.radius"
                        [fillColor] = "mapJurisdictionOptions.fillColor" 
                        [fillOpacity]="mapJurisdictionOptions.fillOpacity"
                        draggable="false" [editable]="false" zindex="2">
                    </map-circle>
                    <!--End Jurisdiction shapes-->
                    <kml-layer url="http://localhost/kml_s.kml"></kml-layer>
                </ng2-map>

拥有$ key值。而我保持$照片的相同用途。现在一切都好。

希望它可以提供帮助。