How to pass hidden values with ajax upload form

Question

I'm busying with passing some values of hidden input with an ajax form. I've tried may ways but it looks like the values didn't go through.

HTML

<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="hidden" name="sid" value="$rec_sStdi[std_sid]" />
    <input type="hidden" name="stid" value="$rec_sStdi[stdi_sid]" />
    <input type="text" name="title" class="form-control" size="50" maxlength="128" autocomplete="off" placeholder="ชื่อไฟล์ เช่น แบบประเมินครู เป็นต้น"/>
    <progress id="progressBar" value="0" max="100" style="width:100%;"></progress>                          
    <button class="btn btn-primary btn-xs pull-right" type="button" value="Upload File" onclick="uploadFile()"><i class="glyphicon glyphicon-upload"></i>&nbsp;อัพโหลด</button>
    <input type="file" name="file1" id="file1" class="btn btn-danger btn-xs pull-right">
  <b id="status"></b>
  <p id="loaded_n_total"></p>
</form>

Javascript

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", "inc/eval_file_upload.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";
}

PHP (eval_file_upload.php)

<?
$sid=$_POST['sid'];
$stid=$_POST['stid'];
$title=$_POST['title'];

$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, "../files/$fileName")){

    echo "\"$fileName\" upload is complete (sid:$sid , stid:$stid, title:$title)";  
} else {
    echo "move_uploaded_file function failed";
}
?>

I tried to test the passing by echoing the hidden values. But nothing shows up. ref : http://www.developphp.com/view.php?tid=1351

Answer 1

Try to add the params in your ajax call:

sid = document.getElementById("sid").value;
stid = document.getElementById("stid").value;
formdata.append("sid", sid);
formdata.append("stid", stid);

And adds an id to your input type hidden.

<input type="hidden" id="sid" name="sid" value="$rec_sStdi[std_sid]" />
<input type="hidden" id="stid" name="stid" value="$rec_sStdi[stdi_sid]" />