在WooCommerce结帐页面增加文件上传字段

PetitQ WordPress教程 2022-9-12 665 0 0

在 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 保存到订单的元数据中就可以了。

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 之类的插件也能实现，但是文件上传功能往往需要购买付费版本才有，为了这一个功能去购买这样的插件略显不划算，并且使用代码实现更加自由并且性能更好，有需要的朋友可以参考。

在 WooCommerce 结帐页面增加文件上传字段

已有 166 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

WordPress教程

在WooCommerce结帐页面增加文件上传字段

在 WooCommerce 结帐页面增加文件上传字段

相关文章

WordPress 非插件实现滚动自动无限分页

WordPress 禁止作者为文章设置标签

WordPress纯代码集成ckplayer播放器

发表回复取消回复

热销模板

WordPress教程

在 WooCommerce 结帐页面增加文件上传字段

相关文章

发表回复 取消回复

热销模板

发表回复取消回复