douqingji3026
2015-05-11 11:24
浏览 48
已采纳

通过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

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

  • dtufl26404 2015-05-11 11:31
    最佳回答

    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.

    评论
    解决 无用
    打赏 举报
查看更多回答(1条)

相关推荐 更多相似问题