How to properly send FormData using AJAX in Wordpress?

Question

I've been reading a lot of questions on Stack Overflow and implementing the answers. Nothing seems to work, tough. I want to allow users to upload files and I've managed to implement it without AJAX. It was all in one PHP script(PHP, Javascript, CSS). While seperating everything to clean it up, I decided to try and make it use AJAX.

Here's the link to my javascript file: AJAX

The file contains an AJAX request for deletion, as well. But, I'm not worrying about if that works right now.

And here's the link to upload.php: upload.php

This PHP file is not called directly, I'm hooking it int an action hook, like so:

add_action( 'wp_ajax_vibesoft_files_upload', 'vibesoft_files_upload' );
function vibesoft_files_upload() {
    include 'upload.php';
}

This code is then included in the functions.php of my active theme.

EDIT: Forgot to include what gets printed to the console:

EDIT 2: Found a possible clue! Yay! Here's a snippet of code from admin-ajax.php:

// Require an action parameter
if ( empty( $_REQUEST['action'] ) )
    wp_die( '0', 400 );

Since I got back a 400 in the console log, I changed the 400 here to 666. The success function ran and it failed this check from my AJAX script:

if ( typeof data == 'object' ) {
    console.log( 'data is JSON' );
}

On the next line, there is:

console.log( data )

Which prints a single 0 and admin-ajax has a wp_die( '0' ) at the end of it.

EDIT 3: So, I've changed the $.ajax invocation a bit:

$( '#user-file' ).change( function( event ) {
    var formData = new FormData();
    formData.append( "action", "vibesoft_files_upload" );
    formData.append( "_wpnonce", vbsoft.nonce_upload );
    formData.append( "user-file", $(this)[0].files[0] );

$.ajax({
    type: "POST",
    url: vbsoft.ajax_url,
    data: formData,
    contentType: false,
    processData: false,
    dataType: 'JSON',

Of course, this is not the complete function. What I've changed is how I prepare FormData and the new thing that's happening is: If I remove the dataType: 'JSON' from the code, I get a complete page in response(I don't know which one, there's a LOT of html and stuff I get back). If I keep data: 'JSON' there, I get an Object with statusText:"parseerror" and responseText:"the_entire_page_here"

The first line, after

wp_send_json( array( 'error' => 'Test' ) );

How come I'm not getting JSON back?

EDIT 4:

Okay, tried changing all of the $ to jQuery - still no change. I have modified my admin-ajax.php a little, for debugging purposes:

// Require an action parameter
if ( empty( $_REQUEST['action'] ) ) {
    wp_send_json( array( 'error' => 'no action parameter' ) );
    wp_die( '0', 400 );
}

Now, I'm getting JSON back. Sweet! So, I'm somehow not sending an action parameter in my data. I don't get it. I've seen several examples online which use formData.append( "action", "action_name_without_wp_ajax" ); in various places.

EDIT 5:

I've been looking at the Network tab of the Chrome Dev tools a bit.

That's what I get in the response header if I set contentType: false, and if I set it to contentType: "multipart/form-data", I get:

Answer 1

请考虑将您的所有“ $”更改为“ jQuery”