在使用dropzone.js
和PHP时,我似乎无法显示用户反馈,我无法看到问题所在。
我创建了一个变量$f
,当使用post方法发送表单时显示,但是当我通过dropzone.js
<?php
require_once'FileClass.php';
$fileHandler = new handleFiles();
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_FILES['file'])) {
$f = "hhh";
if ($fileHandler->is_file_allowed($_FILES['file']['name'], $_FILES['file']['size'], $_FILES['file']['type'])) {
$feedback = "Image submitted your link: " . "YOUR_LINK" . " " . $fileHandler->generateURL($_FILES['file']['name'],$_FILES['file']['tmp_name'], $_POST["tags"]);
}
else {
$feedback = "Something went wrong try again make sure your image is in jpg, jpeg, or png form";
}
}
else {
$feedback = "Something went wrong try again make sure your image is in jpg, jpeg, or png form";
}
}
?>
<!DOCTYPE HTML>
<html lang = "en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="dropzone.js">
</script>
<link rel = "stylesheet" href = "dropzone.css">
<link rel = "stylesheet" href = "index.css">
<title> Share Your Images </title>
</head>
<body>
<?php
if (isset($_GET['url']) && $_GET['url'] === 'new') {
echo "<style> .container {display:none;} </style>"; //hides the image selection form
echo "<link rel = 'stylesheet' href = 'imageGrid.css'>";
$fileHandler->select_newest_posts();
}
elseif (isset($_GET['url'])) {
header("Location:/imagesharing/Images/" . $_GET['url']);
}
?>
<script>
$(document).ready(function() {
var spacingHeight = $("nav").outerHeight(true);
$("img.bg").css("top", spacingHeight + "px");
$(".container").css("margin-top", spacingHeight + "px");
var bgArray = [];
var currentIndex = 1;
var timeOfFade = 1000;
setInterval(function() {
$("img.bg").attr("src", bgArray[currentIndex]);
$("img.bg").css("opacity", .6);
$("img.bg").fadeTo(timeOfFade, 0.9)
currentIndex++;
if (currentIndex == 3) {
currentIndex = 0;
}
}, 6000);
var heightOfDottedContainer = $(".drop").outerHeight();
setInterval(function() {
heightOfDottedContainer = $(".drop").outerHeight();
heightOfDottedContainer /= 2;
heightOfDottedContainer += "px";
$("span.dropText").css("bottom", heightOfDottedContainer);
}, 350);
setInterval(function() {
var file = $("form input[type = file]").val();
if (file != "") {
$("#fileText").text("Your file: " + file);
}
}, 200);
$("[title = 'Browse']").mouseenter(function() {
$(".hoverMenu").show(500);
});
$(".hoverMenu").mouseleave(function() {
$(".hoverMenu").hide(500);
});
Dropzone.autoDiscover = false;
var mydz = new Dropzone("#myzone");
});
</script>
<span class = "header">
<span class = "headerText"> Playpics
</span>
<nav>
<ul>
<li> <a href = "/imagesharing/index.php" title = "Home"> Home </a> </li>
<li> <a href = "#" title = "Browse"> Browse </a> </li>
<li> <a href = "#" title = "Help"> Help </a> </li>
</ul>
<div class = "hoverMenu">
<div> <a href = "new"> New </a> </div>
<div> <a href = "new"> Witcher 3 </a></div>
<div> <a href = "new"> Skyrim </a> </div>
<div> <!-- div for the form -->
<form method = "GET" action = "">
<input type = "text" name = "searchForTags" placeholder="Search by Tags">
<input type = "submit" name = "submit" value = "Search">
</form>
</div>
</div>
</nav>
</span>
<img class = "bg" src = "">
<div class = "container">
<div class = "drop">
<?php
// user for testing this method $fileHandler->get_image_from_tags("witcher3");
if (isset($fileHandler) && isset($feedback)) {
echo $fileHandler->feedbackMessage($feedback);
}
?>
<span class = "dropText"> Drag Your Images Here (only .jpg, .jpeg, and .png)
<br>
<span id = "fileText"> </span>
</span>
</div>
<form action = "index.php" method = "POST" enctype="multipart/form-data"> <!-- form action must be set to index.php or dragging files will not work -->
<input type = "file" id="files" name="file" multiple>
<input type = "text" name = "tags" placeholder= "Enter any applicable tags (optional)">
<input type = "submit" name = "submit" value = "Submit">
</form>
<form action = "index.php" class = "dropzone" id = "myzone">
<?php if (isset($f)) {
echo $f;
}
?>
<input type = "file" name = "files[]">
</form>
</div>
</body>
</html>