我在自定义页面的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=""> </label>
<input type="text" class="form-control" name="cellnumber" placeholder="Enter Phone Number..">
<label for=""> </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创建多种尺寸,如缩略图或类似的东西。
这是我的表格的视图。 Form View
任何人都可以帮助我或建议我该怎么做? 我尝试使用ajax uploader或jquery上传方法,但我必须做很多事情,比如制作数据库条目。有什么方法我必须遵循吗?
答案 0 :(得分: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();
}