在開發 WordPress 用戶中心的時候，我們需要讓用戶在前段上傳自定義圖片作為頭像，因為很多用戶都是小白，上傳頭像之前要求他們按照尺寸裁剪好是不大現實的。為了提升用戶體驗，我研究測試了很久，終于搞定了讓 WordPress 用戶在前段上傳圖片并裁剪的功能。上傳圖片用了 jQuery Ajax Upload 插件，裁剪功能用了 jQuery?Jcorp，都是比較成熟，并且瀏覽器兼容性較好的 jQuery 插件。功能的使用效果如下圖。

WordPress 使用 jcorp 裁剪圖片作為自定義頭像

上傳并裁剪圖片用到的功能函數

處理上傳的圖片用到了 Github 上找到的一個 WordPress 上傳輔助類 MediaUpload，其他的處理函數用到了 WordPress 為我們提供的以下幾個函數：

update_user_meta：添加或更新用戶自定義字段，主要用來添加上傳的圖片為用戶頭像

wp_get_attachment_url：獲取用戶頭像的src地址

wp_get_attachment_metadata：獲取上傳的圖片的meta信息，用來進一步處理裁剪圖片

wp_upload_dir：獲取WordPress的上傳目錄，保存裁剪后的圖片的時候需要用到

wp_get_image_editor：獲取圖片編輯器，裁剪圖片主要就是使用的這個功能

保存使用Ajax方式上傳的圖片

這一步使用了 MediaUpload 類，比較簡單，只需要新建一個MediaUpload實例，然后把 Ajax 傳過來的圖片名稱賦值給這個實例就可以了。保存后會返回一個圖片附件 ID，把這個 ID 作為用戶自定義頭像字段的值保存到數據庫里面就可以了。

// 引入上傳圖片輔助類

include_once( 'MediaUpload.php' );

/*Ajax上傳圖片*/

add_action( 'wp_ajax_upload', 'ajax_upload' );

add_action( 'wp_ajax_nopriv_upload', 'ajax_upload' );

function ajax_upload() {

$current_user = wp_get_current_user();

$uid = $current_user->ID;

$tmp = new MediaUpload;

if ( $_FILES ) {

foreach ( $_FILES as $file => $array ) {

$newupload = $tmp->saveUpload( $field_name=$file );

}

}

update_user_meta($uid, 'cus_avatar', $newupload['attachment_id']);

$res = array(

'id' => $newupload['attachment_id'],

'url' => wp_get_attachment_url($newupload['attachment_id'])

);

echo json_encode($res);

die(); //停止執行

}

使用 Jcorp 裁剪原始圖片并保存到 WordPress 上傳目錄

這一步的難點在于獲取圖片名稱和上傳目錄，很多朋友可能會在這里遇到問題，我也是嘗試了很久才測試成功的，下面的代碼是我測試過的，可以直接拿去用。

/*Ajax上傳圖片*/

add_action( 'wp_ajax_subcorp', 'subcorp_img' );

add_action( 'wp_ajax_nopriv_subcorp', 'subcorp_img' );

function subcorp_img() {

/*獲取用戶id*/

$current_user = wp_get_current_user();

$uid = $current_user->ID;

/*獲取上傳的字段*/

$src1 = $_POST["goods_img"];

$src_x = $_POST["x"];

$src_y = $_POST["y"];

$src_w = $_POST["w"];

$src_h = $_POST["h"];

/*獲取上傳目錄名和文件名*/

$wp_upload_dir = wp_upload_dir();

$img_meta = wp_get_attachment_metadata($src1);

$img_file = $wp_upload_dir['basedir'] . '/' . $img_meta['file'];

/*保存裁剪后的圖片到上傳目錄*/

$image = wp_get_image_editor( $img_file );

if ( ! is_wp_error( $image ) ) {

$image->crop( $src_x, $src_y, $src_w, $src_h, $dst_w = $src_w, $dst_h = $src_h, $src_abs = false );

$new_name = $image->generate_filename();

$image->save($new_name);

}

// 獲取圖片擴展名

$filetype = wp_check_filetype( basename( $new_name ), null );

// 準備插入附件

$attachment = array(

'guid' => $wp_upload_dir['url'] . '/' . basename( $new_name ),

'post_mime_type' => $filetype['type'],

'post_title' => preg_replace( '/\.[^.]+$/', '', basename( $new_name ) ),

'post_content' => '',

'post_status' => 'inherit'

);

// 插入附件，并更新自定義頭像字段

$attach_id = wp_insert_attachment( $attachment, $new_name );

update_user_meta($uid, 'cus_avatar', $attach_id);

$corped_url = wp_get_attachment_url($attach_id);

echo $corped_url;

exit;

}

除了上傳自定義頭像，本文介紹的方法同樣可以用在前端上傳文章縮略圖或文章相冊上面，只需要稍作改動就可以了。因為前端部分基本上不涉及 WordPress，在這里就不再做介紹了，有能力的朋友可以直接參照上面提到的兩個 jQuery 插件的文檔使用。如果對本文有什么疑問或更好的看法，歡迎在評論中提出交流，如果你覺得自己實現上面的功能比較吃力或者太浪費使用，歡迎聯系 WordPress 智庫定制開發。

總結

以上是生活随笔為你收集整理的php 图片上载 wordpress,WordPress 使用 Jcorp上传并裁剪图片作为自定义头像 —— PHP 后台部分...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。