I'm trying to make an upload scrip with categories and I want to use XMLHttpRequest, the categories are with html select option, I do not know why the category does not update when I upload the file,I always get on the result page Cat 1,i have folowings codes:
function init() {
var fileInput = document.getElementById('file-input');
var uploadbutton = document.getElementById('upload');
var yourSelect = document.getElementById("categ");
cat = yourSelect.options[yourSelect.selectedIndex].value;
var uploadProgress = document.getElementById('progress-amount');
/////////////////////////////////////////////////////////////////
uploadbutton.addEventListener('click', function () {
xhr = new XMLHttpRequest();
fd = new FormData();
fd.append('file', fileInput.files[0]);
fd.append('cat', cat);
xhr.upload.onloadstart = function (e) {
uploadProgress.value = 0;
uploadProgress.max = e.total;
uploadbutton.disabled = true;
};
xhr.upload.onprogress = function (e) {
var percent = parseInt(e.loaded / e.total * 100);
uploadProgress.style.width = percent + "%";
document.getElementById("percent").innerHTML = percent + "%";
};
xhr.onloadend = function () {
document.open();
document.write(xhr.responseText);
document.close();
};
xhr.open('POST', 'catch-file.php', true);
xhr.send(fd);
});
}
init();
<input type="file" id="file-input" name="filetoupload" accept="audio/mp3" required="required">
<select size='1' id='categ' name="cat">
<option value="1">Cat 1</option>
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
In PHP i have this:
echo 'cat '.$_POST['cat'].'< br/>'.$_FILES['file']['name'];
if(move_uploaded_file($_FILES['file']['tmp_name'], 'test/' . $_FILES['file']['name'])){
echo '<br/>succes :)';
}