如何在CodeIgniter中使用ajax和jquery验证上传图像

Question

我正在使用CodeIgniter、ajax和jquery验证。我正在上传个人资料图片，但它不起作用。

如果我上传了一个没有经过jquery验证的图像，那么它可以工作，但有了jquery验证，它就不工作了。它显示If condition

if ($this - > form_validation - > run() == FALSE) {
echo "Not working";
}

它并没有将图像名称从ajax发送到控制器。我添加了服务器端验证，它显示错误"The Profile Pic field is required."。你能帮我解决这个问题吗？

查看

<form action="#" method="post" id="edit_Memberdetails" enctype="multipart/form-data">
<input type="file" name="profile_pic" id="profile_pic">
<?php echo form_error('profile_pic'); ?>
<input type="submit" value="Submit" class="btn btn-primary">
</form>

AJAX

$(document).ready(function() {
$("#edit_Memberdetails").validate({
// Specify the validation rules
rules: {
profile_pic: {
required: true,
extension: "jpg,jpeg,png"
}
},
submitHandler: function(form) {
var formData = new FormData(form);
$.ajax({
url: "<?php echo base_url('Member_controller/edit_Memberdetails');?>",
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function(data) {
alert("Added successfully");
setTimeout(function() { // wait for 5 secs(2)
location.reload(); // then reload the page.(3)
}, 1000);
},
}); // AJAX Get Jquery statment
}
});
});

控制器

public function edit_Memberdetails() {
$this - > form_validation - > set_error_delimiters('<div class="error">', '</div>');
$this - > form_validation - > set_rules('profile_pic', 'Profile Pic', 'required');
if ($this - > form_validation - > run() == FALSE) {
echo "Not working";
} else {
$config = [
'upload_path' => './uploads/images',
'allowed_types' => 'jpg|png|jpeg',
'file_name' => uniqid().time().date("dmy")
];
print_r($config);
$this - > load - > library('upload', $config);
if ($this - > upload - > do_upload('profile_pic')) {
$profile_pic_set = $this - > upload - > data('file_name');
}
$data = array(
'profile_pic' => $profile_pic_set
);
$secure_data = $this - > security - > xss_clean($data);
if ($secure_data) {
$this - > db - > where('customer_id', $this - > session - > userdata['login_session']['custid']);
$this - > db - > set($secure_data);
$this - > db - > update('members', $secure_data);
$this - > session - > set_flashdata('success', "recode added");
} else {
$this - > session - > set_flashdata('error', "Sometning wrong! please check the internet connection and try again");
}
// redirect("Member_controller/member_dashboard");//calling employee register 
}
}

Answer 1

对于通过ajax上传的图像，您必须手动将图像附加到FormData，因此在submitHandler:中更改代码如下

var formdata = new FormData(document.getElementById('edit_Memberdetails'));
var profile_pic = $('#profile_pic').get(0).files[0];
formdata.append('profile_pic', profile_pic);

文件上载数据未存储在$_POST数组中，因此无法使用CodeIgniter的表单验证库进行验证。PHP可以使用$_FILES数组上传文件，因此请更改控制器中的表单验证规则：

$this-> form_validation->set_rules('profile_pic', 'Profile Pic', 'required');

对此：

if (empty($_FILES['profile_pic']['name']))
{
$this->form_validation->set_rules('profile_pic', 'Profile picture', 'required');
}

Answer 2

将图像附加到表单数据，例如：

var fd = new FormData();
var files = $('#file')[0].files[0]; 
fd.append('file',files);

这里的完整示例