Multiple Datei-Uploads

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Divo1984

Erfahrenes Mitglied
Hallo meine Lieben,

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

HTML:
<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:

Javascript:
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:
<?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?
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
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:
Code:
    <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:
Code:
<?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']);
}
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…