dropzone.js 和 ajax 调用 = 空 $_FILE, $_POST答案

【问题标题】：dropzone.js and ajax call = empty $_FILE, $_POSTdropzone.js 和 ajax 调用 = 空 $_FILE, $_POST
【发布时间】：2016-08-06 13:24:15
【问题描述】：

我正在尝试通过 AJAX 将表单变量发送到 PHP，并在 console.log 中显示结果。但是控制台始终没有显示数据的价值。我不知道怎么了。到目前为止我所拥有的：

部分 jQuery 代码：

...
init: function() {
    this.on('success', function(csvFile, json) {
        // AJAX 
        $.ajax({
            url : "tests.php",
            type : "POST",
            data : this.csvFile
        }).done(function (data) {
            // Bei Erfolg
            console.log("Erfolgreich:" + data);
        }).fail(function() {
            // Bei Fehler
            console.log("Fehler!");
        }).always(function() {
            // Immer
            console.log("Beendet!");
        });
    });

部分 HTML 代码：

<form action="tests.php" class="dropzone" id="myAwesomeDropzone">
    <input type="text" name="testname" value="das bin ich"/>
</form>

PHP 代码：

if(!empty($_FILES)){
    $test = $_FILES['file']['tmp_name'];
    echo test;
}

if(!empty($_POST)){
    $test2 = $_POST['testname'];
    echo $test2;
}

【问题讨论】：

this.csvFile 上您要传递的内容是什么？
请在php文件的顶部加上print_r($_POST);，这样我们就确定有输出，并检查是否收到POST数据。

标签： php jquery ajax

【解决方案1】：

您的 HTML 代码和 PHP 工作正常（只需在您的 tests.php 中将“echo test”修复为“echo $test”）。 Dropzone 会自动将自己附加到任何具有“dropzone”类的东西上，并且在您选择文件后，它将向您的服务器发出 ajax 请求。

如果您想以编程方式：

HTML

<div id="myDZ">
  Drop your file
  <input type="text" id="testname" name="testname" value="hello_world"/>
  <button id="upload">upload</button>
</div>

jQuery:

    <script type="text/javascript">
        $("#upload").click(function(e){
          myDZ.processQueue();
        })
        var myDZ = new Dropzone("#myDZ", { 
             url: "tests.php",
             autoProcessQueue: false,
             init: function(){
                 this.on('sending', function(xhr, fd1, fd2){
                     //append extra data here
                     fd2.append("testname", $("#testname").val());
                 });    

                 this.on('success', function(file, responseText){
                   //do after successful upload
                   console.log(responseText);
                 })
               }
         });
 </script>

如果您希望在选择文件后自动上传，则可以删除“autoProcessQueue: false”并删除按钮内容。

更多活动可以在这里找到：http://www.dropzonejs.com/#event-list

【讨论】：