如何将JavaScript变量发布到PHP文件以分配给PHP变量？

Question

I have a webpage with several images. Each image can be replaced by an other image on the same place. Next to each image there is a form to upload the new image. Important is that the new filename must be replaced with a fixed name eg.: cat.jpg becomes image1.jpg , dog.jpg becomes image5.jpg , depending on the form used. I use this html code for a first image:

 <div class="w3-padding-8 w3-card-8 w3-center w3-third w3-container ">
                <div class="w3-padding-8 w3-card-8 w3-center w3-container"><img src="images/cat.jpg" class="w3-padding-8 style="width:100%"></div>
                <div class="w3-center w3-container">
                    <form method="POST" action="upload4.php" enctype="multipart/form-data">
                        <input type="file" multiple name="file[]" data-maxfilesize="5000000">
                        <input class="button-primary" type="submit" value="Submit 1">
                    </form>
                </div>
            </div>

In the upload4.php I have this code to receive the new file. Now it assigns the name images/image1.jpg to it but I need a variable with the new filename in it.

<?php 
$sentfile = 'images/image1.jpg';
if (is_array($_FILES['file']['name'])) {
    foreach($_FILES['file']['name'] as $k=>$filename) {
        $uploadfile = $sentfile;
        if (move_uploaded_file($_FILES['file']['tmp_name'][$k], $uploadfile)) {
            // ok
        } else {
            $error_message.= "Error while uploading file ".$filename."<br />";
        }
    }
} elseif(isset($_FILES['file']['name'])) {
    $uploadfile = $sentfile;
    if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
        // ok
    } else {
        $error_message = "Error while uploading file ".$_FILES['file']['name']."<br />";
    }
}
?>

How do I assign images/image1.jpg to $sentfile ? I think I need AJAX ? But how? I know Javascript is client-side and php is serverside but how to communicate...

Answer 1

If i have understood correctly your question, what you are asking is to add a name to the image uploaded depending on the form used.

You could add

<input type="hidden" value="here goes the desired name of the image" name="desired name">

and then get the value through $_POST['desired_name'] .

Answer 2

You wont need ajax for this

First change the input tag to look like below:

<input type="file" onchange="getNewName_one(this.value)" multiple name="file[]" data-maxfilesize="5000000">

Then your create a function in JS:

<script>
function getNewName_one(str) {
  var break_path = str.split('\\');  // make sure the \\ is actually two inorder for it to work
  var len = break_path.length - 1;  // we need to get the last entry of the loop
  var filename = break_path[len]; // filename contains only the filename now;
  document.cookie = "newImageName_one="+filename;
}
</script>

Then update the php now

<?php 

$sentfile = $_COOKIE['newImageName_one'];  
?>

If your are having problems with the filename itself; like your are getting some wierd names in the input type="file" just comment it. Thank you.

Answer 3

The new form:

<form>
    <input type="file" onchange="changeFile(this.value)" name="file[]" />
</form>

The JS:

<script>
    function changeFile(val) {

    var break_path = val.split('\\');
    var len = break_path.length - 1; 
    var filename = break_path[len];

    var ajaxCall = new XMLHttPRequest();
    ajaxCall.onreadystatechange = function(){
          if (ajaxCall.readyState === 4 && ajaxCall.status === 200) {
             var response = ajaxCall.responseText;
          }
      };


      ajaxCall.open("GET", "upload.php?fileName="+filename, true);
      ajaxCall.send();
    }
</script>

** you can use only one file upload.php ***

Then in the upload.php file:

<?php

if(isset($_GET['filename'])) {

$sentfile = $_GET['filename'];

}
if (is_array($_FILES['file']['name'])) {
  foreach($_FILES['file']['name'] as $k=>$filename) {
    $uploadfile = $sentfile;
    if (move_uploaded_file($_FILES['file']['tmp_name'][$k], $uploadfile)) {
        // ok
    } else {
        $error_message.= "Error while uploading file ".$filename."<br />";
    }
   }
} elseif(isset($_FILES['file']['name'])) {
$uploadfile = $sentfile;
if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
    // ok
} else {
    $error_message = "Error while uploading file ".$_FILES['file']['name']."<br />";
}
}

if($error_message != '') {
    echo 'Image Uploaded';
} else {
    echo $error_message;
}

?>