同时使用HTML、PHP和Javascript
我是一个新手，试图了解如何使这3个旋转板一起工作。到目前为止，我只使用了html和javascript，但现在我相信我将不得不使用php html页面有一个带有文本输入和图像上传的表单。目标是，在提交图像时，将其上载到我的服务器，并上载我的firebase实时数据库和信息。我的其他所有页面都没有图像上传，只有文本字段，所以我刚刚为onclick事件调用了一个javascript函数addDeal（），用于提交按钮。更新我的firebase数据库很好 现在，如果我理解google告诉我的，为了集成图像上传，我有一个upload.php页面用于我的表单操作，而不是在提交按钮上调用它。我制作了upload.php页面，将我的图像上传到服务器上效果很好。但现在我不知道如何调用javascript函数，然后将数据添加到firebase数据库中 我是否也应该使用upload.php页面在php中进行firebase更新？或者在我的html页面上保留javascript更新，并以某种方式同时进行？这是我的密码 addDigital.html同时使用HTML、PHP和Javascript,javascript,php,Javascript,Php,我是一个新手，试图了解如何使这3个旋转板一起工作。到目前为止，我只使用了html和javascript，但现在我相信我将不得不使用php html页面有一个带有文本输入和图像上传的表单。目标是，在提交图像时，将其上载到我的服务器，并上载我的firebase实时数据库和信息。我的其他所有页面都没有图像上传，只有文本字段，所以我刚刚为onclick事件调用了一个javascript函数addDeal（），用于提交按钮。更新我的firebase数据库很好 现在，如果我理解google告诉我的，为了集成
<!DOCTYPE html>
<html>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<div class="wholeOption">
<label for="descText">Text to display:
<textarea id="descText" name="descText" cols="80" rows="2"></textarea>
</label>
</div>
<div class="wholeOption">
<label for="fileToUpload">Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
</label>
</div>
<div class="processdeals">
<input type="submit" class="submit" value="ADD DIGITAL MATCHUP" name="submit">
</div>
</form>
<div class="results">
<h2>Results: </h2>
<p id="message" class="message"></p>
<p class="errors" id="errors"></p>
</div>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx",
databaseURL: "xxx",
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx",
appId: "xxx",
measurementId: "xxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script>
firebase.auth().onAuthStateChanged((user) => {
if (user) {
var uid = user.uid;
} else {
// User is signed out
window.location = '../login.html';
}
});
// this is the function I want to ALSO happen when the form is submitted in addition to the upload.php action
function addDeal(){
let good = 1;
document.getElementById("errors").innerHTML = '';
let descText = document.getElementById("descText").value;
let imageUpload = document.getElementById("imageUpload").value;
let postDate=new Date().getTime();
if (descText == ''){
good = 0;
document.getElementById("errors").innerHTML += "Text to display cannot be blank!";
}
if (good){
// firebase.database().ref('digital/' + postDate).set({
// "desc" : descText,
// "imageUpload" : imageUpload,
// "postedDate" : postDate,
// })
// .then(()=>{
// document.getElementById("message").innerHTML = "added successfully!";
// clearDeal();
// })
// .catch((error)=>{
// document.getElementById("message").innerHTML = "Database error " + error;
// })
} else {
document.getElementById("message").innerHTML = "Digital Deal NOT added. See errors below.";
}
}
</script>
</body>
</html>
要显示的文本：
选择要上载的图像：
结果：
var firebaseConfig={
apiKey：“xxx”，
authDomain:“xxx”，
数据库URL:“xxx”，
投影：“xxx”，
storageBucket：“xxx”，
messagingSenderId:“xxx”，
appId:“xxx”，
度量标准：“xxx”
};
//初始化Firebase
firebase.initializeApp（firebaseConfig）；
firebase.analytics（）；
firebase.auth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
var uid=user.uid；
}否则{
//用户已注销
window.location='../login.html'；
}
});
//除了upload.php操作之外，在提交表单时，我还希望使用这个函数
函数addDeal（）{
让good=1；
document.getElementById（“错误”）.innerHTML=''；
让descText=document.getElementById（“descText”）.value；
让imageUpload=document.getElementById（“imageUpload”）.value；
让postDate=newdate（）.getTime（）；
如果（descText=''）{
良好=0；
document.getElementById（“错误”）.innerHTML+=“要显示的文本不能为空！”；
}
如果（好）{
//firebase.database（）.ref（'digital/'+postDate）.set({
//“描述”：描述文本，
//“imageUpload”：imageUpload，
//“postedDate”：postDate，
// })
//.然后（（）=>{
//document.getElementById（“message”）.innerHTML=“添加成功！”；
//clearDeal（）；
// })
//.catch（（错误）=>{
//document.getElementById（“message”）.innerHTML=“数据库错误”+错误；
// })
}否则{
document.getElementById（“message”）.innerHTML=“未添加数字交易。请参阅下面的错误。”；
}
}
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 5000000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
要了解哪个是哪个，您可以阅读服务器/客户端体系结构、
HTTPPHPHTMLCSSJavascriptHTTPPHPPHPPHPHTTPPHPHTTPPHPHTMLPHPHTMLJavascript这是您提到的那些技术最常用的用法。要了解哪个是哪个，您可以阅读服务器/客户机体系结构、
HTTPPHPHTMLCSSJavascriptHTTPPHPPHPPHPHTTPPHPHTTPPHPHTML