Question

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

未捕获的TypeError：非法调用

我也尝试添加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
当然它会发布到所需的网址，而不是在jsfiddler：）

Answer 2

首先，在这里发布您的代码......至少是一个片段。

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

顺便说一下，只使用xhr上传是可能的，但你不能像你在你的例子中那样做，不幸的是......

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

Ajax post数组：Uncaught TypeError：非法调用

2 个答案: