WooCommerce二次开发：结帐页面添加文件上传字段

terry 2年前 (2023-09-24) 阅读数 58 #后端开发

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'%20).change( function() {

		if ( ! this.files.length ) {
			$( '#misha_filelist'%20).empty();
		} else {

			// we need only the only one for now, right?
			const file = this.files[0];

			$( '#misha_filelist'%20).html( '<img ><span>'%20+ file.name + '</span>'%20);

			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"]'%20).val( response );
				}
			});

		}

	} );

} );

服务器端接收并保存Ajax上传的文件

将用户上传的图片保存到服务器

前端通过Ajax上传后，我们需要在后端对上传的文件进行保存和处理。接下来是保存的文件，在示例代码中，保存文件后，我们将文件的URL返回给前端。如果我们需要对图片进行进一步的处理，我们也可以同时将图片文件的ID返回给前端。具体代码可以在本站搜索相关文件，这里不再赘述。

add_action( 'wp_ajax_mishaupload', 'misha_file_upload'%20);
add_action( 'wp_ajax_nopriv_mishaupload', 'misha_file_upload'%20);

function misha_file_upload(){

	$upload_dir = wp_upload_dir();

	if ( isset( $_FILES[ 'misha_file'%20] ) ) {
		$path = $upload_dir[ 'path'%20] . '/'%20. basename( $_FILES[ 'misha_file'%20][ 'name'%20] );

		if( move_uploaded_file( $_FILES[ 'misha_file'%20][ 'tmp_name'%20], $path ) ) {
			echo $upload_dir[ 'url'%20] . '/'%20. basename( $_FILES[ 'misha_file'%20][ 'name'%20] );
		}
	}
	die;
}

至此我们就完成了文件上传表单、文件上传和保存步骤。接下来，我们需要将上传的文件保存到订单信息中。

将上传文件的URL保存在订单中，并显示在订单详情页面

将上传文件的URL保存在订单信息中

这一步比较简单。我们保存直接从结账表单发送的文件的 URL。只需转到订单元数据即可。

add_action( 'woocommerce_checkout_update_order_meta', 'misha_save_what_we_added'%20);

function misha_save_what_we_added( $order_id ){

	if( ! empty( $_POST[ 'misha_file_field'%20] ) ) {
		update_post_meta( $order_id, 'misha_file_field', sanitize_text_field( $_POST[ 'misha_file_field'%20] ) );
	}

}

在订单详情中显示上传的图片

为了方便管理员处理订单，我们还需要在订单详情中显示图片文件。

add_action( 'woocommerce_admin_order_data_after_order_details', 'misha_order_meta_general'%20);

function misha_order_meta_general( $order ){

	$file = get_post_meta( $order->get_id(), 'misha_file_field', true );
	if( $file ) {
		echo '<img  />';
	}

}