在进行WooCommerce二次开发时，通常需要自定义一些功能。其中，在结账页面上传文件是一个常见需求。为了实现这个功能，我们需要在结账页面添加一个自定义文件上传字段。虽然这个字段看起来很简单，但实际上需要进行一些复杂的工作。下面是具体的代码实现。
1、在前段增加文件上传字段并使用Ajax上传
添加文件上传表单
下面的代码中，我们把上传文件需要的HTML表单代码添加到了结账表单中。
add_action( 'woocommerce_after_checkout_billing_form', 'misha_file_upload_field' );
function misha_file_upload_field() {
?>
<div class="form-row form-row-wide">
<input type="file" id="misha_file" name="misha_file" />
<input type="hidden" name="misha_file_field" />
<label for="misha_file"><a>Select a cool image</a></label>
<div id="misha_filelist"></div>
</div>
<?php
}使用jQuery处理用户文件上传。
接着，我们使用Ajax方法上传文件。一旦用户选择了文件，我们立即通过Ajax将文件上传到后端，以便在结账时直接使用已上传的图像文件URL。
jQuery( function( $ ) {
$( '#misha_file' ).change( function() {
if ( ! this.files.length ) {
$( '#misha_filelist' ).empty();
} else {
// we need only the only one for now, right?
const file = this.files[0];
$( '#misha_filelist' ).html( '<img src="' + URL.createObjectURL( file ) + '"><span>' + file.name + '</span>' );
const formData = new FormData();
formData.append( 'misha_file', file );
$.ajax({
url: wc_checkout_params.ajax_url + '?action=mishaupload',
type: 'POST',
data: formData,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function ( response ) {
$( 'input[name="misha_file_field"]' ).val( response );
}
});
}
} );
} );
在服务端接收并保存前端Ajax上传的文件
保存用户上传的图像到服务器上
一旦前端通过Ajax上传文件，我们需要在后端保存处理上传的文件。以下是保存文件的示例代码。保存文件后，我们将文件的URL返回给前端。如果需要进一步处理图像，我们还可以同时返回一个图像文件的ID给前端。您可以在本站上搜索相关文件以获取更具体的代码示例。在此，我们不再重复列出。
add_action( 'wp_ajax_mishaupload', 'misha_file_upload' );
add_action( 'wp_ajax_nopriv_mishaupload', 'misha_file_upload' );
function misha_file_upload(){
$upload_dir = wp_upload_dir();
if ( isset( $_FILES[ 'misha_file' ] ) ) {
$path = $upload_dir[ 'path' ] . '/' . basename( $_FILES[ 'misha_file' ][ 'name' ] );
if( move_uploaded_file( $_FILES[ 'misha_file' ][ 'tmp_name' ], $path ) ) {
echo $upload_dir[ 'url' ] . '/' . basename( $_FILES[ 'misha_file' ][ 'name' ] );
}
}
die;
}
到此为止，我们已经完成了上传文件的表单、文件上传和保存的步骤。下一步，我们需要将上传的文件保存到订单信息中。
在订单中保存上传的文件URL并显示在订单详情页面
在订单信息中保存上传的文件URL
这一步非常简单，只需要将结账表单上传的文件URL保存到订单的元数据中即可。
add_action( 'woocommerce_checkout_update_order_meta', 'misha_save_what_we_added' );
function misha_save_what_we_added( $order_id ){
if( ! empty( $_POST[ 'misha_file_field' ] ) ) {
update_post_meta( $order_id, 'misha_file_field', sanitize_text_field( $_POST[ 'misha_file_field' ] ) );
}
}
在订单信息中显示上传的图像
为了方便订单管理员处理，我们还需要在订单详情中显示图像文件。
add_action( 'woocommerce_admin_order_data_after_order_details', 'misha_order_meta_general' );
function misha_order_meta_general( $order ){
$file = get_post_meta( $order->get_id(), 'misha_file_field', true );
if( $file ) {
echo '<img src="' . esc_url( $file ) . '" />';
}
}
总结
本文介绍的功能可以使用像Checkout Field Editor等插件来实现，但是文件上传功能通常需要购买付费版本才能实现。为了仅实现这个功能而购买插件可能不太划算。使用代码实现不仅更自由，而且性能更好，有需要的朋友可以参考本文提供的方法。
参考：Wp智库
接着，我们使用Ajax方法上传文件。一旦用户选择了文件，我们立即通过Ajax将文件上传到后端，以便在结账时直接使用已上传的图像文件URL。
jQuery( function( $ ) {
$( '#misha_file' ).change( function() {
if ( ! this.files.length ) {
$( '#misha_filelist' ).empty();
} else {
// we need only the only one for now, right?
const file = this.files[0];
$( '#misha_filelist' ).html( '<img src="' + URL.createObjectURL( file ) + '"><span>' + file.name + '</span>' );
const formData = new FormData();
formData.append( 'misha_file', file );
$.ajax({
url: wc_checkout_params.ajax_url + '?action=mishaupload',
type: 'POST',
data: formData,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function ( response ) {
$( 'input[name="misha_file_field"]' ).val( response );
}
});
}
} );
} );一旦前端通过Ajax上传文件，我们需要在后端保存处理上传的文件。以下是保存文件的示例代码。保存文件后，我们将文件的URL返回给前端。如果需要进一步处理图像，我们还可以同时返回一个图像文件的ID给前端。您可以在本站上搜索相关文件以获取更具体的代码示例。在此，我们不再重复列出。
add_action( 'wp_ajax_mishaupload', 'misha_file_upload' );
add_action( 'wp_ajax_nopriv_mishaupload', 'misha_file_upload' );
function misha_file_upload(){
$upload_dir = wp_upload_dir();
if ( isset( $_FILES[ 'misha_file' ] ) ) {
$path = $upload_dir[ 'path' ] . '/' . basename( $_FILES[ 'misha_file' ][ 'name' ] );
if( move_uploaded_file( $_FILES[ 'misha_file' ][ 'tmp_name' ], $path ) ) {
echo $upload_dir[ 'url' ] . '/' . basename( $_FILES[ 'misha_file' ][ 'name' ] );
}
}
die;
}到此为止，我们已经完成了上传文件的表单、文件上传和保存的步骤。下一步，我们需要将上传的文件保存到订单信息中。
在订单中保存上传的文件URL并显示在订单详情页面
在订单信息中保存上传的文件URL
这一步非常简单，只需要将结账表单上传的文件URL保存到订单的元数据中即可。
add_action( 'woocommerce_checkout_update_order_meta', 'misha_save_what_we_added' );
function misha_save_what_we_added( $order_id ){
if( ! empty( $_POST[ 'misha_file_field' ] ) ) {
update_post_meta( $order_id, 'misha_file_field', sanitize_text_field( $_POST[ 'misha_file_field' ] ) );
}
}
在订单信息中显示上传的图像
为了方便订单管理员处理，我们还需要在订单详情中显示图像文件。
add_action( 'woocommerce_admin_order_data_after_order_details', 'misha_order_meta_general' );
function misha_order_meta_general( $order ){
$file = get_post_meta( $order->get_id(), 'misha_file_field', true );
if( $file ) {
echo '<img src="' . esc_url( $file ) . '" />';
}
}
总结
本文介绍的功能可以使用像Checkout Field Editor等插件来实现，但是文件上传功能通常需要购买付费版本才能实现。为了仅实现这个功能而购买插件可能不太划算。使用代码实现不仅更自由，而且性能更好，有需要的朋友可以参考本文提供的方法。
参考：Wp智库
这一步非常简单，只需要将结账表单上传的文件URL保存到订单的元数据中即可。
add_action( 'woocommerce_checkout_update_order_meta', 'misha_save_what_we_added' );
function misha_save_what_we_added( $order_id ){
if( ! empty( $_POST[ 'misha_file_field' ] ) ) {
update_post_meta( $order_id, 'misha_file_field', sanitize_text_field( $_POST[ 'misha_file_field' ] ) );
}
}为了方便订单管理员处理，我们还需要在订单详情中显示图像文件。
add_action( 'woocommerce_admin_order_data_after_order_details', 'misha_order_meta_general' );
function misha_order_meta_general( $order ){
$file = get_post_meta( $order->get_id(), 'misha_file_field', true );
if( $file ) {
echo '<img src="' . esc_url( $file ) . '" />';
}
}总结
本文介绍的功能可以使用像Checkout Field Editor等插件来实现，但是文件上传功能通常需要购买付费版本才能实现。为了仅实现这个功能而购买插件可能不太划算。使用代码实现不仅更自由，而且性能更好，有需要的朋友可以参考本文提供的方法。
参考：Wp智库