I'm new on this form. So I'm currently working on a music player website. In this case I want to upload a file in the server. To do this, I want to have a Javascript form and at the click of the button it will execute a function which opens a XMLHttpRequest to another page (upload2.php). In that page I want to "convert" the variables of the form and insert them in my MySQL Database. All without refreshing the page. How can I do it? I started writing this code (upload and ajax calls functions works correctly, just want to make a javascript form) :
MAIN PAGE:
<html>
<head>
<script>
function reqListener () {
document.getElementById("content1").innerHTML = this.responseText;
}
function func_upload2() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.addEventListener("load", reqListener);
xmlhttp.open("POST", "upload2.php", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="content1">
<h1> UPLOAD </h1>
<form name="myForm"><br>
<input type=file name="pic" accept=".mp3"> <br>
<button type="button" id="upload" name="btn-upload"
onclick="func_upload2()"> UPLOAD </button><br>
</form>
</div>
</body>
</html>
upload2.php:
<html>
<head>
</head>
<body>
<?php
$namefile=$_FILES['pic']['name'];
$pic = rand(1000,100000) ."-".$_FILES['pic']['name'];
$pic =$_FILES['pic']['name'];
$pic_loc = $_FILES['pic']['tmp_name'];
$path="Tracks/".$_SESSION['IdUser'];
if(!is_dir($path))
{
Mkdir("Tracks/".$_SESSION['IdUser']."/",0777);
}
$folder="Tracks/".$_SESSION['IdUser']."/";
if(move_uploaded_file($pic_loc,$folder.$pic))
{
$path1=$folder.$namefile;
echo $path1;
$insert = $connect->query("INSERT INTO Tracks (Name,
Path, IdUser) VALUES ('".$namefile."', '".$path1."',
'".$_SESSION['IdUser']."');");
echo "Uploaded!";
}
else
{
echo "Not uploaded";
}
?>
</body>
</html>
