Send variable from the form (POST) via ajax to another PHP script (GET)

Question

For last couple days I've tried to find proper upload script for my files. When I found one I've noticed that I could use couple more features for it. In this script there is a simple form with just "Browse" button, progress bar (Ajax, jQuery/JS) and the Upload button. That's it. What I'm trying to do is to add some features to the form, like choosing category of the file. So here's the code for upload_form.html

<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury @ DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}
</script>
</head>
<body>
<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1"><br>
  <input type="button" value="Upload File" onclick="uploadFile()">
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <h3 id="status"></h3>
  <p id="loaded_n_total"></p>
</form>
</body>
</html>

and for file_upload_parser.php

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

What I want to do is add some more options to the form (like "select") and after pressing the Upload button, send the variable from that form to the .php file and use GET function to get that variable so I can use it for something else, like add that file and its category to the database. The problem is I don't know how to do this. I've tried to change the Upload button for submit-type, but it's not working (bad idea, now I know), I've tried to add some variables into the JS code, but (in my case) it's not working as well. Can you please help me solve this problem? I will be very grateful for any help I can get. Regards

Barmar · Accepted Answer · 2015-05-11 11:31:56Z

1

GET parameters must be added to the URL. So if the form contains

<select id="menu">
    ...
</select>

your Javascript would be:

function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var menuValue = _("menu").value;
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php?menu=" + menuValue);
    ajax.send(formdata);
}

Then your PHP can use $_GET['menu'] to get the value of this parameter.

BTW, you need to change your onclick to onclick="uploadFile(); return false;". It has to return false to prevent the default form submission.

answered May 11, 2015 at 11:31

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

5 Comments

woyo-sensei Over a year ago

I've tried your method and when I'm using $_GET like this: $dest = $_GET['send']; then the value for $dest is null. Am I doing something wrong?

Barmar Over a year ago

You used ?send= in the URL?

woyo-sensei Over a year ago

Yes. Code with var: var dest = _("cat".value) and my link: ajax.open("POST", "file_upload_parser.php?send=" + dest, also my select looks like this: <select id="cat" name="cat">.

Barmar Over a year ago

It should be _("cat").value not _("cat".value)

woyo-sensei Over a year ago

Heh, it's working like a charm now :) Thank you very much and sorry for my silly mistake :P

Prashant Sharma · Accepted Answer · 2015-05-11 12:10:34Z

0

You need to execute one more ajax call after completion of file upload. Like,

function completeHandler(event){
        _("status").innerHTML = event.target.responseText;
        _("progressBar").value = 0;
        sendSelectedParameter();
}
function sendSelectedParameter(){
    //get selected value and execute another ajax call of GET type.
}

answered May 11, 2015 at 12:10

Prashant Sharma

1395 bronze badges

Collectives™ on Stack Overflow

Send variable from the form (POST) via ajax to another PHP script (GET)

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related