Verwenden Sie javscript
für die Behandlung des Submit-Ereignisses. Das Speichern des Programmzustands kann auf verschiedene Arten erfolgen. In diesem Beispiel habe ich zwei versteckte Felder, um die Werte zu speichern:
<input type="hidden" name="DifficultyChoice" id="hiddDiff" value="-1" />
<input type="hidden" name="toolChoice" id="hiddTool" value="-1" />
Ich habe zwei Funktionen changeDifficulty
und changeTools
, die ein int
übergeben werden und sie setzen die Werte der hidden fields
auch.
Hidden fields
werden verwendet, da sie eine name
haben, die an die empfangende PHP
-Datei übergeben wird. Sie müssen also nicht names
auf jedem button
verwenden. Stattdessen lassen javascript
es für Sie tun mit two functions
und two hidden fields
:
EDIT: ich die ursprüngliche Antwort für ein funktionierendes Beispiel ersetzt, da die OP für den empfangenden Server-Seite als auch gefragt.
Das Programm besteht aus zwei PHP
Dateien a_test.php
und b_tesp.php
und eine javascript
Datei a_test.js
. Sie sollten sich alle in demselben Ordner befinden, damit dieses Beispiel funktioniert.
Programmablauf:a_test.php
POST
Daten b_test.php
a_test.js
mit schicken. b_test.php
empfängt die Daten und versucht sie zu validieren. Wenn alles in Ordnung ist, wird das Bild hochgeladen, sonst wird eine Fehlermeldung angezeigt.Hier
ist der Code:
Datei a_test.php
:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="a_test.js"></script>
</head>
<body>
<form id="formUploadFile" name="formUploadFile" action="b_test.php" enctype="multipart/form-data" method="post" >
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_file_size ?>">
<p align="left">
<label for="file" >First, Choose your image!</label>
<input type="file" name="img_1" />
</p>
<h5>Would you like to use colored pencils or paint?</h5>
<div class="btn-group">
<input type="button" class="btn btn-primary" value="Colored Pencils" onclick="changeTools(0)" />
<input type="button" class="btn btn-primary" value="Paint" onclick="changeTools(1)" />
</div>
<h5>Then, Choose your Difficulty!</h5>
<div class="btn-group">
<input type="button" class="btn btn-success" value="Kids" onclick= "changeDifficulty(0)" />
<input type="button" class="btn btn-success" value="Novice" onclick="changeDifficulty(1)" />
<input type="button" class="btn btn-success" value="Intermediate" onclick="changeDifficulty(2)" />
<input type="button" class="btn btn-success" value="Advanced" onclick="changeDifficulty(3)" />
</div>
<input type="hidden" name="difficultyChoice" id="hiddDiff" value="-1" />
<input type="hidden" name="toolChoice" id="hiddTool" value="-1" />
</form>
</body>
</html>
Datei a_test.js
:
function changeDifficulty(number)
{
var toolChoice = parseInt(document.getElementById('hiddTool').value)
var difficulty = document.getElementById('hiddDiff');
var form = document.getElementById('formUploadFile');
difficulty.value = number;
// if the toolChoice is set
if(toolChoice != -1)
{
// Show the values, for testing purposes
console.log("Tools: " + toolChoice + " Difficulty: " + difficulty.value);
form.submit();
}
}
function changeTools(number)
{
var difficulty = parseInt(document.getElementById('hiddDiff').value)
var toolChoice = document.getElementById('hiddTool');
var form = document.getElementById('formUploadFile');
toolChoice.value = number;
// If the difficulty is set
if(difficulty != -1)
{
console.log("Tools: " + toolChoice.value + " Difficulty: " + difficulty);
form.submit();
}
}
Datei b_test.php
:
<?php
// make a function to check if `int` so you don't have to retype for each variable
function checkIfInt($var)
{
// Here we use a fix to let `0` also be validated as `int`
if (filter_var($var, FILTER_VALIDATE_INT) || filter_var($var, FILTER_VALIDATE_INT) === 0)
{
return true;
}
else
{
return false;
}
}
function checkImageValidityAndUpload()
{
// Check if file was uploaded without errors
if($_FILES["img_1"]["error"] == 0)
{
// allowed image types
$allowed = array("jpg" => "image/jpg", "jpeg" => "image/jpeg", "gif" => "image/gif", "png" => "image/png");
// some (incoming) file properties
$filename = $_FILES["img_1"]["name"];
$filetype = $_FILES["img_1"]["type"];
$filesize = $_FILES["img_1"]["size"];
// Verify file extension (here we are comparing the file extension to the keys of $allowed array)
$ext = pathinfo($filename, PATHINFO_EXTENSION);
if(!array_key_exists($ext, $allowed))
{
echo "Error: Please select a valid file format.<br/>";
return false;
}
// Verify file size - 5MB maximum (5MB is example, you can set anything)
$maxsize = 5 * 1024 * 1024;
if($filesize > $maxsize)
{
echo "Error: File size is larger than the allowed limit.<br/>";
return false;
}
// Verify MYME type of the file (here we are comparing the file MYME type to the $allowed array values)
if(in_array($filetype, $allowed))
{
// Check whether file exists before uploading it (upload/ is example folder, change to your image folder)
if(file_exists("upload/" . $_FILES["img_1"]["name"]))
{
echo $_FILES["img_1"]["name"] . " already exists.<br/>";
return false;
}
else
{
move_uploaded_file($_FILES["img_1"]["tmp_name"], "upload/" . $_FILES["img_1"]["name"]);
return true;
}
}
else
{
echo "Error: There was a problem uploading your file. Please try again.<br/>";
return false;
}
}
else
{
echo "Error: " . $_FILES["img_1"]["error"]."<br/>";
return false;
}
}
// MAIN program starts here - Check if the form was submitted
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$tools = array("Colored Pencils", "Paint");
$difficulties = array("Kids", "Novice", "Intermediate", "Advanced");
// check if all needed variables are set and valid, and if the image is valid and uploaded successfully
if(isset($_POST['difficultyChoice']) && isset($_POST['toolChoice']) && isset($_FILES['img_1']) &&
checkIfInt($_POST['difficultyChoice']) && checkIfInt($_POST['toolChoice']) &&
checkImageValidityAndUpload())
{
$diff = intval($_POST['difficultyChoice']);
$tool = intval($_POST['toolChoice']);
echo 'Tools choice: '.$tools[$tool].' Difficulty choice: '.$difficulties[$diff].'<br/>';
echo 'image has been uploaded successfully';
// do something
}
else
{
echo 'Something went wrong. Program will not continue';
die();
}
}
else
{
echo 'There was no POST request.';
die();
}
?>
Ich denke, die Art, wie dies geschrieben wird, verursacht, dass die Schaltfläche auf den Wert -1 jedes Mal zurückgesetzt wird, wenn ich die andere Schaltfläche auswähle. Ich denke, das liegt daran, dass wir am Anfang jeder Funktion die Variablen durch die Element-ID setzen, und der einzige Bereich, in dem die Element-IDs sind, sind Werte, die auf -1 gesetzt werden? Was ist die Methode, um den Wert dieser Schaltflächen von der PHP-Site zu erhalten? – clutch1020
@ clutch1020 Ok, ich werde jetzt ein funktionierendes Beispiel einer Beispieldatei 'a_test.php' hochladen (ich habe es gerade getestet), die das Bild, Schwierigkeitsgrad und toolChoice in eine Datei namens' b_test.php' übertragen wird. Die Datei 'a_test.php' verwendet eine Javascript-Datei' a_test.js'. Legen Sie alle diese Dateien in den gleichen Ordner. Lesen Sie die Kommentare, die ich in 'b_test.php' hinterlassen habe, um zu verstehen, wie das Programm auf der Empfängerseite funktioniert. Setzen Sie Ihren 'Upload-Ordner' auf einen vorhandenen Ordner, da das Programm nicht prüft, ob der Ordner existiert. – Ivan86
@ Kupplung1020 Ok. Ich habe bearbeitet. Kopieren Sie einfach den Code in neue Dateien und geben Sie ihm die Dateinamen, die ich zur Verfügung gestellt habe, damit er funktioniert. Die Menge an Code auf der Serverseite ('b_test.php') wird benötigt, da das Hochladen eines Images ein großes Sicherheitsrisiko darstellt und ordnungsgemäß überprüft werden sollte. – Ivan86