如何通过ajax将表单输入传递给其他php文件

时间:2018-07-08 13:04:03

标签: javascript ajax

我在github上找到了这个ajax文件上传代码,它可以按我的要求工作,但是我想通过ajax从表单输入中传递更多变量。我关注了一个关于stackoverflow-Send variable from the form (POST) via ajax to another PHP script (GET)的问题。但就我而言,它无法正常工作,我无法通过upload.php页面上的GET获得价值。 这是JavaScript代码

<script>

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 appid = _("appid").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", "modules/upload/demo5/upload.php?appid="+appid);
    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>

这是表格区域

<form id="upload_form" enctype="multipart/form-data" method="post">
                             <input type="hidden" name="appid" id="appid" value="EVSA75883664">
                             <input type="file" name="file1" id="file1"><br>
                             <input type="button" value="Upload File" onclick="uploadFile(); return false;"><br><br>
                             <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
                              <p id="loaded_n_total"></p>
                             <h3 id="status"></h3>

                     </form>

这是upload.php页面代码

    <?php

include('../../connect.php');

$appid = $_GET['appid'];

$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 is Uploaded Successfully. <br><br> <a href='https://www.indian-evisas.org.in/uploadppt.php?appid='.$appid.'>Click here to Proceed to Next Step</a>";
} else {
    echo "move_uploaded_file function failed";
}


?>

0 个答案:

没有答案