通过ajax将表单中的变量(POST)发送到另一个PHP脚本(GET) [英] Send variable from the form (POST) via ajax to another PHP script (GET)
问题描述
最近几天，我一直在尝试为文件找到合适的上传脚本.当我找到一个时，我注意到我可以使用更多的功能.在此脚本中，有一个简单的表单，仅带有浏览"按钮，进度条(Ajax，jQuery/JS)和上载"按钮.而已.我想做的是向表单添加一些功能，例如选择文件的类别.因此，这是 upload_form.html
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>
以及 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";
}
?>
我想做的是向表单添加一些其他选项(例如选择" )，然后按上载"按钮，将变量从该表单发送到.php文件并使用GET函数来获取该变量，以便将其用于其他用途，例如将该文件及其类别添加到数据库中.问题是我不知道该怎么做.我试图将Upload按钮更改为Submit-type，但是它不起作用(不好的主意，现在我知道)，我试图将一些变量添加到JS代码中，但是(在我的情况下)它不能像出色地.您能帮我解决这个问题吗? 我将非常感谢我能提供的任何帮助. 问候
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参数必须添加到URL.因此，如果表单包含
GET parameters must be added to the URL. So if the form contains
<select id="menu">
...
</select>
您的Javascript将是:
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);
}
然后您的PHP可以使用$_GET['menu']来获取此参数的值.
Then your PHP can use $_GET['menu'] to get the value of this parameter.
顺便说一句，您需要将onclick更改为onclick="uploadFile(); return false;".它必须返回false以防止默认表单提交.
BTW, you need to change your onclick to onclick="uploadFile(); return false;". It has to return false to prevent the default form submission.
这篇关于通过ajax将表单中的变量(POST)发送到另一个PHP脚本(GET)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
