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会创建多个尺寸，如缩略图或类似的东西。

这是我的表单视图。 表单视图

有人能帮我或建议我如何做到这一点吗？ 我尝试过使用ajax uploader或jquery上传方法，但那里有很多事情要自己做，比如制作db条目。是否有任何正确的方法我必须遵循？

- Alice

---

尝试使用此链接：https://codex.wordpress.org/Function_Reference/wp_handle_upload - Gufran Hasan

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();
}

- mrabro