使用dropzone.js拖动图片时通过php显示反馈

时间:2016-09-01 13:44:09

标签: javascript php dropzone.js

在使用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>

0 个答案:

没有答案