✔ Multiple Datei-Uploads

[Divo1984]

Hallo meine Lieben,

ich habe grad irgendwie ein Brett vor dem Kopf und hoffe ihr könnt mir helfen. Ich habe folgende Inputs:

<div class="form-group">
     <label for="file2" class="black2">Bild-URL:</label>
    <input type="file" name="file2" id="file2"><br>
    <label for="file" class="black2">CSV-File: (bitte mail.csv bennen!)</label>
    <input type="file" name="file" id="file">                                
</div>

Die Übergabe des CSV-Files klappt wunderbar:

function uploadFile() {

                console.log("upload File!\r\n");
               
                   var files = document.getElementById("file").files;

                   if(files.length > 0 ){
                       $("#newsletterForm").html('Datei-Upload!');

                      var formData = new FormData();
                      formData.append("file", files[0]);

                      var xhttp = new XMLHttpRequest();

                      // Set POST method and ajax file path
                      xhttp.open("POST", "ajaxfile.php", true);

                      // call on request changes state
                      xhttp.onreadystatechange = function() {
                         if (this.readyState == 4 && this.status == 200) {

                           var response = this.responseText;
                           if(response == 1){
                               $("#newsletterForm").html('Datei-Upload erfolgreich!');
                              console.log("Upload successfully.");
                           }else{
                              concole.log("File not uploaded.");
                           }
                         }
                      };

                      // Send request with data
                      xhttp.send(formData);

                   }else{
                      console.log("Please select a file");
                   
                   }

                }

Wird verarbeitet hier:

<?php
if(isset($_FILES['file']['name'])){
    $response=0;
    $name = basename($_FILES["file"]["name"]);
    $tmp_name = $_FILES["attachment"]["tmp_name"];
    $test=pathinfo($name);
     
    if(strtolower($test['extension'])!="csv"){
        $err_msg="Datei hat falsches Format! Bitte nur CSV Dateien verwenden! Diese müssen auf .csv enden!";
        $response=3;
    } else {
        if ( move_uploaded_file($_FILES['file']['tmp_name'], '../data/'.$_FILES['file']['name']) ){
            $err_msg="Das war erfolgreich! Unten geht es weiter!";
            $response=1;
            $sendData=TRUE;
           
           
        } else {
            $err_msg=$_FILES['file']['name']." konnte nicht hochgeladen werden!";
            $response=2;
        }
    }
   
    echo $response;
    exit;
   
}

Nun möchte ich aber gern, dass meine JPG-Datei auch auf den Server geladen wird. Leider fehlt mir aber grad die Idee, wie ich das umsetzen soll. Habt ihr mir da vielleicht grad eine kleine Denkhilfe?

 

[Sempervivum]

Du kannst problemlos zwei Dateien hochladen wenn Du sie in formData einträgst. Selber bevorzuge ich die fetch-API, dann würde es so aussehen:

    <div class="form-group">
        <label for="file2" class="black2">Bild-URL:</label>
        <input type="file" name="file2" id="file2"><br>
        <label for="file" class="black2">CSV-File: (bitte mail.csv bennen!)</label>
        <input type="file" name="file" id="file">
        <button type="button" id="upload-btn">Upload</button>
        <output id="out"></output>
    </div>
    <script>
        const fileInput = document.querySelector('#file'),
            fileInput2 = document.querySelector('#file2'),
            uploadBtn = document.querySelector('#upload-btn'),
            output = document.querySelector('#out');
        uploadBtn.addEventListener('click', () => {
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            formData.append('file2', fileInput2.files[0]);
            fetch('upload-2-files.php', {
                method: 'POST',
                body: formData
            }).then(response => {
                return response.text();
            }).then(text => {
                console.log(text);
                output.innerHTML = text;
            });
        });
    </script>

Das output und der Button nur für mich zum Testen. Mit XMLHttpRequest müsste es auch gehen, wenn Du beide Dateien in formData einträgst.
Mein Testp-PHP:

<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
var_dump($_FILES);
if (0 < $_FILES['file']['error']) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
} else {
    move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
}
if (0 < $_FILES['file2']['error']) {
    echo 'Error: ' . $_FILES['file2']['error'] . '<br>';
} else {
    move_uploaded_file($_FILES['file2']['tmp_name'], 'uploads/' . $_FILES['file2']['name']);
}