dropzone.js和ajax call = empty $ _FILE,$ _POST

时间:2016-08-06 01:27:31

标签: php jquery ajax

我正在尝试通过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;
}

1 个答案:

答案 0 :(得分:0)

您的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