How to post a javascript variable to a PHP file to assign to a PHP variable?

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...

"depending on the form used": what distinguishes between the different forms? They have different action attribute values? Or what else? — trincot
– trincot, Commented Aug 19, 2017 at 11:04
Possible duplicate of How to pass value JavaScript variable to PHP? — Ankit Singh
– Ankit Singh, Commented Aug 19, 2017 at 11:08
@trincot the forms are all the same but I need to distinguish them by sending the fixed name maybe in the html between the divs with a kind of a datalink to a javascript file with a post command? — backnext
– backnext, Commented Aug 19, 2017 at 11:16
@Ankit Singh How to pass value is interesting but not helpfull to me. I am new in php ... — backnext
– backnext, Commented Aug 19, 2017 at 11:25

trincot · Accepted Answer · 2017-08-19 11:39:49Z

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'].

edited Aug 19, 2017 at 11:39

trincot

357k38 gold badges282 silver badges338 bronze badges

answered Aug 19, 2017 at 11:16

Weyooo

261 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

backnext Over a year ago

I'll try this... Do I have to place the '$_POST['desired_name']' in the php?

Weyooo Over a year ago

Well, if you want to get the value of the input, you must add the $_POST variable with the corresponding name from the input.

backnext Over a year ago

ok, another question: value and name will have the same content?

Weyooo Over a year ago

Well, value attribute is where you must put the desired name for the image, and then the name attribute is the one that you will use to access the value through PHP.

Weyooo Over a year ago

Example: <input type="hidden" value="Name_image" name="form1"> Then, you will access through $_POST['form1'] and you will get "Name_image".

|

surge10 · Accepted Answer · 2017-08-19 18:34:07Z

0

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.

edited Aug 19, 2017 at 18:34

answered Aug 19, 2017 at 11:16

surge10

6521 gold badge6 silver badges18 bronze badges

7 Comments

backnext Over a year ago

thanks. When I insert the code as you mentioned without changing things, The file is uploaded with the old name in a strange way: on the server: C:\fakepath\cat.jpg. Where do I put the new name?

surge10 Over a year ago

wow, I was expecting the C:\fakepath thing. But why the old name, did you use the onchange="", thing?

surge10 Over a year ago

@backnext edited. Thanks. Anything else, let me know. ok.

backnext Over a year ago

I used your code: '<input type="file" onchange="getNewName(this.value)" multiple name="file[]" data-maxfilesize="5000000">' But I think the new file name must be inserted here but where?

backnext Over a year ago

Now I put in each form 'onchange="getNewName1(this.value)"', 'onchange="getNewName2(this.value)"', and so on. Then for each form a new function like this ' function getNewName1(str) { document.cookie = "newImageName=" + "images/1.jpg"; }' . That works but may be there is a shorter code possible?

|

surge10 · Accepted Answer · 2017-08-19 19:07:03Z

0

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;
}

?>

answered Aug 19, 2017 at 19:07

surge10

6521 gold badge6 silver badges18 bronze badges

1 Comment

backnext Over a year ago

this Ajax solution doesn't work for me. It says 'Image Uploaded' but nothing happened. I don't know what's wrong.

Collectives™ on Stack Overflow

How to post a javascript variable to a PHP file to assign to a PHP variable?

3 Answers 3

7 Comments

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related