Convalidare singoli file in più file caricati prima di caricarli sul server

Question

Ho un modulo con 3 campi di input file separati. Non riesco a trovare un modo per convalidare individualmente i loro tipi MIME prima di caricarli sul server. (Si suppone che i primi 2 consentano solo file MP3, mentre l'ultimo dovrebbe solo consentire file JPEG.)

Come posso fare questo, o è meglio controllare il tipo MIME dopo che il file è stato caricato, quindi mantenerlo o cancellarlo e restituire un messaggio di errore?

Ecco il mio codice:

<form action="upload.php" method="post" enctype="multipart/form-data"> 

    <div class="col-2"> 
    <label> 
     Full MP3 file 
     <input type="file" name="file_array[]" id="file_array[]" tabindex="1" required> 
    </label> 
    </div> 

    <div class="col-2"> 
    <label> 
     Sample MP3 file (30-45 seconds) 
     <input type="file" name="file_array[]" id="file_array[]" tabindex="2" required> 
    </label> 
    </div> 

    <div class="col-2"> 
    <label> 
     JPEG Cover Art (Recommended 400 x 400 px) 
     <input type="file" name="file_array[]" id="file_array[]" tabindex="3" required> 
    </label> 
    </div> 

    <div class="col-2"> 
    <label> 
     <progress id="progressBar" value="0" max="100" style="width:100%;"> </progress> 
    </label> 
    </div> 

    <div class="col-submit"> 
    <input type="submit" value="Upload" class="submitbtn" onclick="uploadFile()"> 
    </div> 

</form> 

e questo è upload.php

if(isset($_FILES['file_array'])){ 
    $name_array = $_FILES['file_array']['name']; 
    $tmp_name_array = $_FILES['file_array']['tmp_name']; 
    $type_array = $_FILES['file_array']['type']; 
    $size_array = $_FILES['file_array']['size']; 
    $error_array = $_FILES['file_array']['error']; 
    for($i = 0; $i < count($tmp_name_array); $i++){ 
     if(move_uploaded_file($tmp_name_array[$i], "../artists/$id/temp/".$name_array[$i])){ 
      echo $name_array[$i]." upload is complete<br>"; 
     } else { 
      echo "move_uploaded_file function failed for ".$name_array[$i]."<br>"; 
     } 
    } 
} 

Answer 1

Penso che si possa utilizzare la convalida sul lato client per rendere l'esperienza più liscia. come ha sottolineato Mario, si può usare qualcosa di simile ad accettare solo i file mp3:

<input type="file" accept=".mp3" name="file_array[]" id="file_array[]" tabindex="1" required> 

Ma poiché non ci si può fidare dei dati degli utenti, è necessario aggiungere anche la validazione lato server. Ad esempio:

if(isset($_FILES['file_array'])){ 
$name_array = $_FILES['file_array']['name']; 
$tmp_name_array = $_FILES['file_array']['tmp_name']; 
$type_array = $_FILES['file_array']['type']; 
$size_array = $_FILES['file_array']['size']; 
$error_array = $_FILES['file_array']['error']; 
for($i = 0; $i < 3; $i++){ 

    if ($i == 2){ 
     if($type_array[2] != 'image/jpeg'){ 
      echo 'Invalid file type: ' . $type_array[2]; 
      break; 
     } 
    } 
    else { 
     if($type_array[$i] != 'audio/mp3'){ 
      echo 'Invalid file type: ' . $type_array[$i]; 
      break; 
     } 
    } 

    if(move_uploaded_file($tmp_name_array[$i],"../artists/$id/temp/".$name_array[$i])){ 
     echo $name_array[$i]." upload is complete<br>"; 
    } else { 
     echo "move_uploaded_file function failed for ".$name_array[$i]."<br>"; 
    } 
} 
} 

Testato il codice precedente e sembra funzionare per me.

Note:

se si conosce già il numero dei file caricati non utilizzare count in quanto potrebbe causare un rischio, e se si desidera che il numero di file caricati in un momento che sia variabile, quindi assicurarsi che il risultato count non supera il valore massimo. utilizzare anche count al di fuori del ciclo, quindi viene calcolato solo una volta.

ci sono altri modi più rigidi per convalidare i tipi di file, ma questo è quello che ho ottenuto ora.

sperare che questo aiuti e dare un feedback se ho torto in qualsiasi modo.

Answer 2

Impossibile, perché i dati sono disponibili solo dopo il caricamento. Si può provare a dire al browser (se possibile) di inviare solo mime-tipi specifici usando questo:

<input type="file1" name="image" accept="image/*"> 
<input type="file2" name="pdf" accept="application/pdf">