通过ajax将表单（POST）中的变量发送到另一个PHP脚本（GET）

问题描述：

For last couple days I've tried to find proper upload script for my files. When I found one I've noticed that I could use couple more features for it. In this script there is a simple form with just "Browse" button, progress bar (Ajax, jQuery/JS) and the Upload button. That's it. What I'm trying to do is to add some features to the form, like choosing category of the file. So here's the code for upload_form.html

<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury @ DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
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", "file_upload_parser.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";
}
</script>
</head>
<body>
<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1"><br>
  <input type="button" value="Upload File" onclick="uploadFile()">
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <h3 id="status"></h3>
  <p id="loaded_n_total"></p>
</form>
</body>
</html>

and for file_upload_parser.php

<?php
$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 upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

What I want to do is add some more options to the form (like "select") and after pressing the Upload button, send the variable from that form to the .php file and use GET function to get that variable so I can use it for something else, like add that file and its category to the database. The problem is I don't know how to do this. I've tried to change the Upload button for submit-type, but it's not working (bad idea, now I know), I've tried to add some variables into the JS code, but (in my case) it's not working as well. Can you please help me solve this problem? I will be very grateful for any help I can get. Regards

答

GET parameters must be added to the URL. So if the form contains

<select id="menu">
    ...
</select>

your Javascript would be:

function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var menuValue = _("menu").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", "file_upload_parser.php?menu=" + menuValue);
    ajax.send(formdata);
}

Then your PHP can use $_GET['menu'] to get the value of this parameter.

BTW, you need to change your onclick to onclick="uploadFile(); return false;". It has to return false to prevent the default form submission.

答

You need to execute one more ajax call after completion of file upload. Like,

function completeHandler(event){
        _("status").innerHTML = event.target.responseText;
        _("progressBar").value = 0;
        sendSelectedParameter();
}
function sendSelectedParameter(){
    //get selected value and execute another ajax call of GET type.
}

通过ajax将表单（POST）中的变量发送到另一个PHP脚本（GET）

相关推荐