php - wordpress在自定义页面上传图片

Question

我在自定义页面中为 WordPress 中的用户创建了一个表单，代码如下。

<div class="container" style="padding-top: 30px;width: 60%;">
    <div id="FormBlock">
        <form action="">
            <div class="row form-group">
                <div class="col-md-6">
                    <label for="lname">First Name:</label>
                    <input type="text" class="form-control" name="firstName" placeholder="Enter First Name..">
                </div>
                <div class="col-md-6">
                    <label for="lname">Last Name:</label>
                    <input type="text" class="form-control" name="lastName" placeholder="Enter Last Name..">
                </div>
            </div>
            <div class="row form-group" style="margin-bottom: -8px;">
                <div class="col-md-6">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" name="email" placeholder="Enter Email..">
                </div>
                <div class="col-md-2">
                    <label for="cell">Phone:</label>
                    <?php echo countrySelector(); ?>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <label for="">&nbsp;</label>
                        <input type="text" class="form-control" name="cellnumber" placeholder="Enter Phone Number..">
                        <label for="">&nbsp;</label>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-basic" id="verify">Verify</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-6">
                    <label for="Citizenship">Country of Citizenship</label>
                    <?php echo CountryNames("Citizenship","Citizenship"); ?>
                </div>
                <div class="col-md-6">
                    <label for="residence">Country of Residence</label>
                    <?php echo CountryNames("Residence","Residence"); ?>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-12">
                    <label for="address">Residential Address</label>
                    <input type="text" class="form-control" name="address" placeholder="Enter your address..">
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-12">
                    <label for="ec2wallet">EC2 Wallet Address</label>
                    <input type="text" class="form-control" name="ec2wallet" placeholder="Enter your EC2 Wallet address..">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label for="Upload">Upload your documents</label>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-6">
                    <input type="file" name="identity" id="identity" class="form-control">
                    <label for="identity"><small>Upload proof of identity (Passport, Driver’s License, National Identification)</small></label>                 
                </div>
                <div class="col-md-6">
                    <input type="file" name="selfie" id="selfie" class="form-control">
                    <label for="selfie"><small>Take Selfie or Upload front facing picture</small></label>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-12">
                    <input type="file" name="residenceID" id="residenceID" class="form-control">
                    <label for="residenceID"><small>Upload proof of residence (ID Card containing your address or utility bill, credit card statement, bank statement or tax bill dated within last 3 months).</small></label>
                </div>
            </div>
        </form>
    </div>
</div>

现在我有三个字段，用户必须在其中上传文档/图片，我想使用 WordPress 正确的方法来上传媒体，其中 WordPress 创建数据库条目及其元数据等。如果图像是上传，那么 WordPress创建多种尺寸，如缩略图或类似的东西。

这是我的表格的 View 。 Form View

谁能帮助我或建议我该怎么做？ 我尝试使用 ajax uploader 或 jquery 上传方法，但我必须自己做很多事情，比如制作数据库条目。有什么正确的方法我必须遵循吗？

Answer 1

使用 ajax 调用你需要在 functions.php 文件中创建函数。

您的 ajax 调用如下:

$("#YourButtnID").click(function(){
        var firstname = $('#fname').val();
        // get all the fields (input) like this..

        // and now for all the input type files.
        var identity = jQuery('#identity').prop('files')[0];
        var residence = jQuery('#residenceID').prop('files')[0];
        var selfie = jQuery('#selfie').prop('files')[0];

        //creating formData and inserting data into it
        var formData = new FormData();
        //action -> this will be your function name in functions.php
        formData.append('action','your_custom_function');
        //now all the data .. appending 
        formData.append('fname',firstname);

        //Your images
        formData.append('identity', identity);        
        formData.append('residence', residence);
        formData.append('selfie', selfie);
        $.ajax({
               type: "POST",
               url: ajaxurl,
               contentType: false,
               processData: false,
               data: formData,
               dataType: "JSON",
               success:function(data){
                   if(data['status']){
                      //All went well
                   }else{
                     // something went wrong
               },
               error:function(err){
                   // You might not have caught any exception
               }
        });

现在在您的 functions.php 文件中，创建函数来完成这一切

<?php
function your_custom_function(){
    // initial response is false by default
    $response = array ('status'=>false,'msg'=>'invalid code');

    // you can have server side validation here if you want 
    // i.e. if(!$_REQUEST['fname']) this means if this field is not sent.. then return relevant response
    if (!function_exists('wp_handle_upload')) {
        require_once(ABSPATH . 'wp-admin/includes/file.php');
    }    
    $yourDBTable = $wpdb->prefix.'yourDBTable';

    $uploadedfile = $_FILES['identity'];
    $upload_overrides = array('test_form' => false);
    $movefile = wp_handle_upload($uploadedfile, $upload_overrides);
    //after uploading to uploads DIR you will get url of your image here
    $id_url = $movefile['url']; 

    $uploadedfile = $_FILES['residence'];
    $upload_overrides = array('test_form' => false);
    $movefile = wp_handle_upload($uploadedfile, $upload_overrides);
    $resid_url = $movefile['url'];

    $uploadedfile = $_FILES['selfie'];
    $upload_overrides = array('test_form' => false);
    $movefile = wp_handle_upload($uploadedfile, $upload_overrides);
    $selfie_url = $movefile['url'];

    $user_data = array(
        'fname' => $_REQUEST['fname'],
        'photo_identity' => $id_url,
        'photo_selfie' => $selfie_url,
        'photo_residence' => $resid_url
    );
    try {
        $result = $wpdb->insert($yourDBTable,$user_data);
        $response['status']=true;
    } catch (Exception $e) {
        $response['msg']="Something went wrong";

    }
    echo json_encode($response);
    wp_die();
}