Ajax 发布数组：未捕获的类型错误：非法调用

Question

我正在尝试将 json 数组发送到 upload.php 文件。弹出如下错误：

未捕获的类型错误：非法调用

我也尝试添加processData: false，但是没有任何内容发布到upload.php。

我的代码：http://jsfiddle.net/r0330537/86yqj/

HTML

<div id="dropzone" class="dropzone">
    Drop uw bestanden en/of zip hier
</div>

JQUERY

$( document ).ready( function() {
    ...
    function drop(event) {
        //console.log( "drop", event );
        event.stopPropagation();
        event.preventDefault();
        $(this).removeClass("dragging");

        var data = event.dataTransfer,
            fileList = data.files,
            file = new Array();

        for(i = 0; i < fileList.length; i++) {
            file.push( fileList[i] );
        }

        console.log( file );
        // ajax
        $.ajax({    
            type : "POST",
            url : "ajax/upload.php",
            dataType : "json",
            data : { "file": file },
            succes : function(data) {
                console.log(data);
            }
        });
    }

    var dropzone = $( ".dropzone" ).get(0);
    ...
    dropzone.addEventListener( "drop", drop, false );
});

Answer 1

你需要将你的事件监听器包装成这样的函数

 var dropzone = $( ".dropzone" ).get(0);
    dropzone.addEventListener( "dragenter", function(){dragEnter(event)}, false );
    dropzone.addEventListener( "dragexit", function(){dragExit(event)}, false );
    dropzone.addEventListener( "dragover", function(){dragOver(event)}, false );
    dropzone.addEventListener( "drop", function(){drop(event)}, false );
});

编辑：您在这里遗漏了很多代码，并且有更好的方法来执行此方法

尽管您需要序列化文件数组才能完成这项工作，但这是对您的代码的最终编辑

   $( document ).ready( function() {
    console.log( "ready!" );

    function dragEnter(event) {
        event.stopPropagation();
        event.preventDefault();
        $(this).addClass("dragging");
    }
    function dragExit(event) {
        event.stopPropagation();
        event.preventDefault();
        $(this).removeClass("dragging");
    }
    function dragOver(event) {
        event.stopPropagation();
        event.preventDefault();
        $(this).addClass("dragging");
    }

    function drop(event) {
        //console.log( "drop", event );
        event.stopPropagation();
        event.preventDefault();
        $(this).removeClass("dragging");

        var data = event.dataTransfer,
            fileList = data.files,
            file = new Array();

        for(i = 0; i < fileList.length; i++) {
            file.push( fileList[i] );
        }
        file = JSON.stringify( file);
        console.log( file );
        // ajax
        $.ajax({    
            type : "POST",
            url : "ajax/upload.php",
            dataType : "json",
            data : { "file": file },
            succes : function(data) {
                console.log(data);
            }
        });
    }

    var dropzone = $( ".dropzone" ).get(0);
    dropzone.addEventListener( "dragenter", function(){dragEnter(event)}, false );
    dropzone.addEventListener( "dragexit", function(){dragExit(event)}, false );
    dropzone.addEventListener( "dragover", function(){dragOver(event)}, false );
    dropzone.addEventListener( "drop", function(){drop(event)}, false );
});

您可以查看here
当然它会发布到所需的 url，它不在 jsfiddler :)

Answer 2

首先，在这里发布您的代码...至少是一个 sn-p。

您将 File 对象放入 ajax 选项数组的 data 键中。这可能会导致序列化数据时出现问题。放入您需要的 data 仅键数据

顺便说一句，仅使用 xhr 上传是可能的，但不幸的是，您不能像在示例中那样进行上传...

请看这个答案...jQuery Ajax File Upload