javascript - 使用AJAX将图像上传到WP媒体库(Upload image to WP Media Library with AJAX)

Question

I am trying to upload an Image to the WP Media Library with AJAX based on this code here:

(我正在尝试根据以下代码使用AJAX将图像上传到WP媒体库：)

https://rudrastyh.com/wordpress/how-to-add-images-to-media-library-from-uploaded-files-programmatically.html

(https://rudrastyh.com/wordpress/how-to-add-images-to-media-library-from-uploaded-files-programmatically.html)

HTML:

(HTML：)

    <form method="post" enctype="multipart/form-data">
        Your Photo: <input id="dropper" type="file" name="profilepicture" size="25" />
        <input type="submit" name="submit" value="Submit" />
    </form>
    <button class="submitter">Submit</button>

PHP:

(PHP：)

function upload_profile()
{

// WordPress environment
    require(dirname(__FILE__) . '/../../../wp-load.php');

    $wordpress_upload_dir = wp_upload_dir();
    // $wordpress_upload_dir['path'] is the full server path to wp-content/uploads/2017/05, for multisite works good as well
    // $wordpress_upload_dir['url'] the absolute URL to the same folder, actually we do not need it, just to show the link to file
    $i = 1; // number of tries when the file with the same name is already exists

    $profilepicture = filter_input($_FILES, 'profilepicture');
    // $profilepicture = $_FILES['profilepicture'];
    $new_file_path = $wordpress_upload_dir['path'] . '/' . $profilepicture['name'];
    $new_file_mime = mime_content_type($profilepicture['tmp_name']);

    if (empty($profilepicture))
        die('File is not selected.');

    if ($profilepicture['error'])
        die($profilepicture['error']);

    if ($profilepicture['size'] > wp_max_upload_size())
        die('It is too large than expected.');

    if (!in_array($new_file_mime, get_allowed_mime_types()))
        die('WordPress doesn't allow this type of uploads.');

    while (file_exists($new_file_path)) {
        $i++;
        $new_file_path = $wordpress_upload_dir['path'] . '/' . $i . '_' . $profilepicture['name'];
    }

// looks like everything is OK
    if (move_uploaded_file($profilepicture['tmp_name'], $new_file_path)) {

        $upload_id = wp_insert_attachment(array(
            'guid' => $new_file_path,
            'post_mime_type' => $new_file_mime,
            'post_title' => preg_replace('/.[^.]+$/', '', $profilepicture['name']),
            'post_content' => '',
            'post_status' => 'inherit'
        ), $new_file_path);

        // wp_generate_attachment_metadata() won't work if you do not include this file
        require_once(ABSPATH . 'wp-admin/includes/image.php');

        // Generate and save the attachment metas into the database
        wp_update_attachment_metadata($upload_id, wp_generate_attachment_metadata($upload_id, $new_file_path));
    }
}

add_action('wp_ajax_upload_profile', 'upload_profile');
add_action('wp_ajax_nopriv_upload_profile', 'upload_profile');

JS

(JS)

document.querySelector('.submitter').addEventListener('click', function () {
    let image = document.querySelector('input[name="profilepicture"]').files;
    console.log(image);

    var request = new XMLHttpRequest();

    request.open('POST', MyAjax.spajax, true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;');
    request.onload = function () {
        if (this.status >= 200 && this.status < 400) {
            console.log('success')
        } else {
            console.log('fail');
        }
    };
    request.onerror = function () {
        console.log('error')
    };
    request.send('action=upload_profile&profilepicture=' + image + '');
});

The AJAX request is being made correctly, but the image is not being uploaded.

(正确发出了AJAX请求，但未上传图像。)

I am assuming the error is somewhere at the filter_input section..

(我假设错误发生在filter_input部分。)

Hope someone can help!

(希望有人能帮忙！)

Best, Dennis

(最好的，丹尼斯)

  ask by Dennis translate from so

Answer 1

等待大神答复