我创建了动态添加/删除字段,其中一个是文件上载字段。一切正常。但是有一个问题。当我在文件字段中添加图像并在其他字段中填充其他详细信息时,数据不会插入数据库中。
当我添加3个字段时,意味着当我添加最多3个图像时,它可以正常工作,数据被插入。但是当我添加第四个图像时,什么也不会插入。
我不明白为什么脚本奇怪地起作用。
以下是代码:
<?php
if ( isset( $_POST['project_draft0'] ) ) {
$user_id = get_current_user_id();
$member_details->member_image = array_map( 'sanitize_file_name', $_FILES['member_image']['name'] );
$member_details->member_name = array_map( 'sanitize_text_field', $_POST['member_name'] );
$member_details->member_email = array_map( 'sanitize_text_field', $_POST['member_email'] );
$member_details->member_role = array_map( 'sanitize_text_field', $_POST['member_role'] );
$member_details->member_fb = array_map( 'sanitize_text_field', $_POST['member_fb'] );
$member_details_encode = wp_json_encode( $member_details );
global $wpdb;
$member_result = $wpdb->insert( 'oc_project_members',
array(
'author_id' => $user_id,
'member_details' => $member_details_encode
),
array(
'%d',
'%s'
)
);
}
?>
<form method="POST" enctype="multipart/form-data">
<div class="card">
<div class="card-header text-center">
<b>Team Members</b>
</div>
<div class="card-body">
<div class="row">
<div class="col-4">
<img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member0">
<br><br>
<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>
</div>
<div class="col-8">
<div class="form-group">
<label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_name[]">
</div>
<div class="form-group">
<label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_email[]">
</div>
<div class="form-group">
<label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_role[]">
</div>
<div class="form-group">
<label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_fb[]">
</div>
</div>
</div>
<div id="member-fields">
</div>
<button type="button" class="btn btn-success btn-block" id="add-member-fields">Add Member</button>
</div>
</div>
<input class="btn btn-warning" type="submit" name="project_draft0" value="Draft" style="border-radius: 0px;">
</form>
<script type="text/javascript">
var i = 0;
function preview_member(event, inp) {
var reader = new FileReader();
console.log(inp);
reader.onload = function() {
var output = document.getElementById('output_member' + inp);
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
}
jQuery(document).ready(function($) {
//fadeout selected item and remove
$(document).on("click", '#remove-member-fields', function(event) {
event.preventDefault();
$(this)
.parent()
.fadeOut(300, function() {
$(this).empty();
return false;
});
});
//add input
$('#add-member-fields').click(function() {
i++;
var rows = <code><div class="all-member-fields"><hr><div class="row"><div class="col-4"><img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ? />" class="img-thumbnail" id="output_member${i}"><br><br><label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div><div class="col-8"><div class="form-group"><label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]"></div><div class="form-group"><label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_email[]"></div><div class="form-group"><label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]"></div><div class="form-group"><label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_fb[]"></div></div></div><button type="button" class="btn btn-danger" id="remove-member-fields" style="float: right;">Remove Member</button><br><br></div></code>;
$(rows)
.fadeIn("slow")
.appendTo('#member-fields');
return false;
});
});
</script>