尝试上传图像时未定义的索引(使用 jquery 验证和步骤)

Question

我正在使用带有jquery步骤和jquery验证的表单步骤。但是当我尝试上传图像时，它显示"未定义的索引：图片"。当我尝试没有两个jquery时，它可以工作。

注册.php

<form class="form-contact contact_form" id="register" enctype="multipart/form-data">
<input name="remarks" id="remarks" type="hidden" value="SMP">
<div class="row">   
<h3> Profil  </h3>
<section>
<div class="col-md-3">
<p class="katapen">NISN</p>
</div>
<div class="col-md-9">
<input class="form-control required number" name="nisn" id="nisn" type="text" placeholder='Please enter your NISN'>
</div>  
<div class="col-md-3">
<p class="katapen">School Status</p>
</div>
<div class="col-md-4">
<div class="switch-wrap d-flex justify-content-between">
<div class="primary-radio">
<input type="radio" name="schoolstatus" value="A" id="primary-radio" required>
<label for="primary-radio"></label>
</div>
<p class="spasidrradio">A</p>
</div>
</div>
<div class="col-md-4">
<div class="switch-wrap d-flex justify-content-between">
<div class="primary-radio">
<input type="radio" name="schoolstatus" value="B" id="primary-radio">
<label for="primary-radio"></label>
</div>
<p class="spasidrradio">B</p>       
</div>
</div>  
</section>
<h3> Personal Data </h3>
<section>
<div class="col-md-3">
<p class="katapen">Full Name</p>
</div>
<div class="col-md-9">
<input class="form-control required" name="fullname" id="fullname" type="text" placeholder='Please enter your fullname' required>
<div class="col-md-3">
<p class="katapen">Picture</p>
</div>
<div class="col-md-9">
<input class="form-control" name="picture" id="picture" type="file">
</div>
</section>

测试.js

var former = $("#register");
former.validate
({
errorPlacement: function errorPlacement(error, element) 
{ 
element.before(error); 
},
rules: 
{
}
});
former.children("div").steps
({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{
former.validate().settings.ignore = ":disabled,:hidden";
return former.valid();
},
onFinishing: function (event, currentIndex)
{
former.validate().settings.ignore = ":disabled";
return former.valid();
},
onFinished: function (event, currentIndex)
{
studentregister();
}
});
function studentregister()
{
var remarks     = document.getElementById('remarks');
$.ajax
({
type: "POST",
url : base_url + "register/" + remarks.value,
data: $('#register').serialize(),
dataType: 'json',
success: function(data)
{
if(data.log.status == '1')
{
swal
({
title: "",
type: "success",
text: data.log.ket,
confirmButtonClass: "btn-success",
confirmButtonText: "Con"
},function(){                   
}); 
}else{
swal
({
title: "",
type: "error",
text: data.log.ket,             
confirmButtonClass: "btn-default",
confirmButtonText: "Back"
},function(){
}); 
}
$("#register")[0].reset();
},
error: function(ts) 
{
alert(ts.responseText);
}
});
return false;
};      

base_url + "register/" + remarks.value 将是路由到 saveRegister 和 renotes.value 作为 uri2

这是我的adm.php

public function saveregister()
{
$uri1 = $this->uri->segment(1);
$uri2 = $this->uri->segment(2);
$uri3 = $this->uri->segment(3);
$uri4 = $this->uri->segment(4);
//var post from json
$p = json_decode(file_get_contents('php://input'));
$_log   = array();
if($uri2 == "SD")
{
}else if($uri2 == "SMP"){
$p      = $this->input->post();
$folder = "./upload/register/";
$allowed_type   = array("image/jpeg", "image/jpg", "image/png", "image/gif", 
"audio/mpeg", "audio/mpg", "audio/mpeg3", "audio/mp3", "audio/x-wav", "audio/wave", "audio/wav","video/mp4", "application/octet-stream", "application/pdf", "application/doc");
$file_name      = $_FILES['picture']['name'];
$file_type      = $_FILES['picture']['type'];
$file_tmp       = $_FILES['picture']['tmp_name'];
$file_error     = $_FILES['picture']['error'];
$file_size      = $_FILES['picture']['size'];
$ekstensi = explode("/", $file_type);
$time = date("Yhsms");
$filename= $this->db->escape($p['nisn'])."_".$time .".".$ekstensi[1];           
@move_uploaded_file($file_tmp, $folder .$filename);
}else{
}
}

Answer 1

如果你看一下jqueryserialize()文档，它说文件选择元素中的数据没有序列化。您可以使用FormData通过 ajax 发送文件输入：

function studentregister()
{
var remarks     = document.getElementById('remarks');
var form = $("#register")[0]; // use the form ID
var formData = new FormData(form);                  
$.ajax
({
type: "POST",
url : base_url + "register/" + remarks.value,
data: formData,
dataType: 'json',
contentType: false, // required
processData: false, // required
success: function(data)
{
if(data.log.status == '1')
{
swal
({
title: "",
type: "success",
text: data.log.ket,
confirmButtonClass: "btn-success",
confirmButtonText: "Con"
},function(){                   
}); 
}else{
swal
({
title: "",
type: "error",
text: data.log.ket,             
confirmButtonClass: "btn-default",
confirmButtonText: "Back"
},function(){
}); 
}
$("#register")[0].reset();
},
error: function(ts) 
{
alert(ts.responseText);
}
});
return false;
};