在Javascript中表单并将变量传递给php而不刷新页面

时间:2017-05-22 15:56:06

标签: javascript php ajax forms xmlhttprequest

我是这个表格上的新人。 所以我目前正在开发一个音乐播放器网站。在这种情况下,我想在服务器上传文件。为此,我希望有一个Javascript表单,单击该按钮,它将执行一个函数,将XMLHttpRequest打开到另一个页面(upload2.php)。在那个页面中我想"转换"表单的变量并将它们插入我的MySQL数据库中。所有没有刷新页面。 我该怎么做? 我开始编写这段代码(上传和ajax调用函数正常工作,只想制作一个javascript表单):

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>

0 个答案:

没有答案