如何在 woocommerce 结帐页面上传图片并将其链接到订单答案

【问题标题】：How to upload a image in woocommerce checkout page and link it to the order如何在 woocommerce 结帐页面上传图片并将其链接到订单
【发布时间】：2014-07-06 15:53:04
【问题描述】：

我正在尝试在结帐页面上传一张图片并将其与订单相关联。所以我尝试添加自定义字段，当我 var_dump $_FILES 我得到空数组。为什么会这样？

function add_file_field(){
    echo '<input type="file" id="checkoutupload" name="checkoutupload">';
}
add_action('woocommerce_after_order_notes','add_file_field');

该字段在结帐页面中可用，但是当我尝试验证它时，我无法从$_FILES 中得到任何东西，而是得到一个空数组

function output_file_datas(){
    $filename = plugin_dir_path(__FILE__).'test.txt';
        ob_start();
    var_dump($_FILES);
    $data = ob_get_clean();
    file_put_contents($filename, $data);
}
add_action('woocommerce_checkout_process','output_file_datas');

这里的 test.txt 是我用来调试的文本文件。

我什至在 jquery 中添加了表单 enctype 属性。所以我认为该文件将可用但不可用。

jQuery(document).ready(function(){
       jQuery('form.checkout').attr('enctype','multipart/form-data');
});

我不知道为什么会这样。谁能告诉我为什么它不上传图片。它仅在这种情况下发生。我试图在同一个结帐页面中添加一个表单。如果我确实从表单上传图像，我可以得到它。但我无法通过 woocommerce 结帐表单获得它。

woocommerce 正在做什么？

我尝试使用 ajax 表单使用 jQuery Form Plugin 上传图片，这已可从 wordpress 获得。在这里我可以得到图片，但我害怕逻辑，因为一旦用户上传图片并且如果他没有下订单，那么上传的图片可能会浪费。

所以我需要将文件与表单一起上传并将其与订单相关联。这个怎么做？为什么我尝试从woocommerce_checkout_process Hook 获取时无法获取$_FILES？

我知道在同一页面中正常上传文件但格式不同是没有问题的。当我尝试使用 woocommerce 结帐表单时，我无法获得 $_FILES。

他们在下订单之前使用 ajax，因为没有得到 $_FILES 数组。如果是这样，我可以替换普通的ajax并使用jQuery Form Plugin，这样我就可以获得$FILES

任何有关该问题的帮助或参考都会对我非常有帮助。

【问题讨论】：

标签： php ajax wordpress file-upload woocommerce

【解决方案1】：

///Add the File Upload Field in Shipping Fields Group 
add_filter( 'woocommerce_shipping_fields', 'woo_filter_upload_shipping' );

function woo_filter_upload_shipping( $address_fields ) { 
//  $address_fields['file_upload']['required'] = true;

$address_fields['file_upload'] = array(
    //'label'     => __('Upload your ID', 'woocommerce'),
    'required'  => false,
    'class'     => array('form-row-wide'),
    'clear'     => true
);

return $address_fields;
}

//Use this function to show Upload field on your form.

function add_file_field(){

  $uploadFile   = "";

  $uploadFile   .='<div id="upload_CNIC_image">';
  $uploadFile .='<input id="file_upload" name="file_upload" type="file" multiple="true">';
  $uploadFile .='<span id="uploadComplete">';
  $uploadFile .='</span>';
  $uploadFile .='</div>';
  echo $uploadFile;
}
add_action('woocommerce_after_order_notes','add_file_field');

为此必须使用 uploadify 类来满足您上传文件的要求。

【讨论】：

【解决方案2】：

我使用了以下钩子来管理表单发布的值：

woocommerce_order_status_on-hold、woocommerce_order_status_processing、woocommerce_order_status_completed

与

按照钩子管理表单字段：

woocommerce_checkout_after_customer_details，woocommerce_after_cart_table

希望这些钩子对你有所帮助。

附：我正在将其作为即插即用的东西进行管理，因此最终将其塑造为plugin！

【讨论】：