将jQuery Image Crop集成到Wordpress中以进行头像图像上传

时间:2013-12-03 17:05:23

标签: php jquery wordpress image

我正在尝试将this plugin用于我的wordpress网站,但收效甚微。

我可以选择图像,然后使用方形选择工具进行选择。当我尝试将这个裁剪的选择添加到我上传我的头像图像的现有表单时,会出现问题。当我点击提交时,我被引导到“找不到404页面”页面。

显然我已经包含了所有附带的脚本,并且已经使用Firebug检查过它们已正确加载。

这就是我所做的:

<?php
    if (isset($_POST["registration_form_submit"])) {

    $counting_faults = 0;

    if ($counting_faults == 0) {

    $account_settings_displayname = preg_replace("/\s+/", " ", $_POST["account_displayname"]);
    $account_settings_displayname = str_replace("@", "", $account_settings_displayname);

    /* Enter the values into WordPress DB */
    $generate_user = wp_update_user(
                    array(
                                    'ID' => $current_user_data->data->ID,
                                    'display_name' => $account_settings_displayname,
                                    'user_email' => preg_replace("/\s+/", " ", $_POST["account_email"]),
                                    'first_name' => preg_replace("/\s+/", " ", $_POST["account_fullname"]),
                                    'description' => mysql_real_escape_string(trim($_POST["account_bio"]))
                    )
                    );

    $outcome = @array_shift(array_values($generate_user->errors));
    }

    /**
    * ******** Avatar image upload starts here *********
    */
    if (isset($_FILES["file_name"]["name"]) && $_FILES["file_name"]["name"] != "") {

    $user_id = $current_user->ID;

    /* Create the uploads folder if it doesn't exist */
    $directory_name = "wp-content/uploads/" . date("Y") . "/";
    if (! is_dir($directory_name)) {
            mkdir($directory_name, 0755);
    }

    $directory_name = "wp-content/uploads/" . date("Y") . "/" . date("m") . "/";
    if (! is_dir($directory_name)) {
            mkdir($directory_name, 0755);
    }
    $filename = $directory_name . basename($_FILES["file_name"]["tmp_name"]) . "-" . $_FILES["file_name"]["name"];

    echo $filename;

    $uploaded_file = move_uploaded_file($_FILES["file_name"]["tmp_name"], $filename);


    /* The part I need your help with -- Stars here */

    $valid_exts = array('jpeg', 'jpg', 'png', 'gif');
    $max_file_size = 200 * 1024; #200kb
   $nw = $nh = 200; # image with # height

    $ext = strtolower(pathinfo($_FILES['file_name']['tmp_name']));
    echo 'ext'.$ext;
    if (in_array($ext, $valid_exts)) {
            $path = 'uploads/' . uniqid() . '.' . $ext;
            $filename = $filename;
            $size = getimagesize($_FILES['file_name']['tmp_name']);

            $x = (int) $_POST['x'];
            $y = (int) $_POST['y'];
            $w = (int) $_POST['w'] ? $_POST['w'] : $size[0];
            $h = (int) $_POST['h'] ? $_POST['h'] : $size[1];

            $data = file_get_contents($_FILES['file_name']['tmp_name']);
            $vImg = imagecreatefromstring($data);
            $dstImg = imagecreatetruecolor($nw, $nh);
            imagecopyresampled($dstImg, $vImg, 0, 0, $x, $y, $nw, $nh, $w, $h);
            imagejpeg($dstImg, $filename);
            imagedestroy($dstImg);
            echo "<img src='$filename' />";

    }

    /* The part I need your help with -- ends here */

    /* Upload the image to WP structure */
    $wp_filetype = wp_check_filetype(basename($filename), null);

    $wp_upload_dir = wp_upload_dir();

    $attachment = array(
                    'guid' => $wp_upload_dir['url'] . '/' . basename($filename),
                    'post_mime_type' => $wp_filetype['type'],
                    'post_title' => preg_replace('/\.[^.]+$/', '', basename($filename)),
                    'post_content' => '',
                    'post_status' => 'inherit'
    );

    $attach_id = wp_insert_attachment($attachment, $filename);
    require_once ('wp-admin/includes/image.php');
    $attach_data = wp_generate_attachment_metadata($attach_id, $filename);
    wp_update_attachment_metadata($attach_id, $attach_data);
    delete_user_meta($user_id, 'wp_user_avatar');
    add_post_meta($attach_id, '_wp_attachment_wp_user_avatar', $user_id, true);
    add_user_meta($user_id, 'wp_user_avatar', $attach_id, true);
    }

    /**
    * ******** Avatar image upload ends here *********
    */
    ?>


    <form method="post" action="" name="account" id="account"   enctype="multipart/form-data">
     <div class="settings-box">


    <li><label class="primary-label">Profile Image</label>
    <div class="formFields"><?php  echo get_avatar( $current_user->user_email, 100 ); ?><br />

            <div>
            <!-- image preview area-->

            <img id="uploadPreview" style="display:none;"/>

            <!-- image uploading form -->

                    <!-- hidden inputs -->
                    <input type="hidden" id="x" name="x" />
                    <input type="hidden" id="y" name="y" />
                    <input type="hidden" id="w" name="w" />
                    <input type="hidden" id="h" name="h" />
                    <input id="uploadImage" type="file" accept="image/jpeg" name="file_name" />
            </div><!--wrap-->

            </div></li>

    <!--    <input type="file" name="photo" id="photo" /><br /><br /> -->

    <li><div class="form-footer s-in">
                    <div class="clear"></div>
                    <input class="btn" type="submit"
                            name="registration_form_submit" value="Update" />
            </div></li>

    </div>

    </form>

1 个答案:

答案 0 :(得分:0)

在这一行中,你的行动是&#34;&#34;实际/故意空白?您的表单可能正在尝试调用不存在的页面:

<form method="post" action="" name="account" id="account"   enctype="multipart/form-data">